grid-template-columns: 1.833333rem 1fr；

于 2024-08-19 15:08:23 发布
阅读量348 收藏
点赞数 7
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kuang_nu/article/details/141325892
版权

问:

grid-template-columns: 1.833333rem 1fr;这是什么属性?

回答:

grid-template-columns: 1.833333rem 1fr; 定义了一个网格布局的列宽：

1.833333rem 表示第一列的宽度是相对于根元素字体大小的固定宽度,

1fr 是一个灵活单位，表示第二列会占据网格容器剩余的空间,

第一列是固定宽度, 第二列是自适应剩余容器的宽度.

fury_123
关注
css grid 布局 fr 和 % 有区别吗？ （grid-template-column 1fr 1fr 或 50% 50%）
qq_40144303的博客
03-29 1195
答案是有的，但也要看情况 如果你父子级别 宽高 写死 是 肯定没有区别的 <style> .grid-all { width: 600px; height: 150px; } .grid-item { /* width: 100%; */ /* height: 100%; */ width: 150px; height: 150px; } .green { ..
4 合并grid列_grid布局笔记2——grid-template-columns、grid-template-rows
weixin_39603573的博客
12-21 876
我们首先了解一下容器属性，display：grid指定一个容器采用网格布局。这样，后续的容器属性或者项目属性才能够发挥效果，这和flex布局是一样的。display：grid；容器元素是块级元素，采用网格布局，我们也可以使容器为行内元素且采用网格布局——display：line-grid，具体取哪个值我们可以视情况而定。(注意，设为网格布局以后，容器子元素(项目)的float、display：in...
css布局grid-template-columns属性
m0_74265396的博客
11-06 1122
将创建一个有三列的网格，其中第一列和第三列的宽度为可用空间的1/3，第二列的宽度为可用空间的2/3。” 将创建一个有6列的网格，其中每个重复的模式包含1个1fr列和1个2fr列。第一列和第三列的宽度为可用空间的1/3，第二列的宽度为可用空间的2/3。总之， grid-template-columns 属性是用于定义网格列数量和大小的非常有用的属性，在创建具有复杂布局的网站时非常有用。您还可以将 grid-template-columns 属性设置为 auto，表示列的大小将根据内容自动调整。
使用Grid布局 实现响应式 grid-template-columns
娃娃鱼的博客
04-11 442
这个代码定义了三列，第一列和第二列宽度按照1:2分配，第三列的宽度至少为100px，但如果有更多空间也可以获取。这个代码定义了三列，第一列宽度为100px，第二列宽度为200px，第三列宽度自动调整以填满剩余空间。这个代码定义了列宽为100px的列，如果容器宽度不够放下一个列，那么会尽可能多地创建列。这个代码定义了三列，第一列和第三列宽度为100px，第二列宽度自动调整以填满剩余空间。这个代码定义了三列，第一列宽度为1份，第二列宽度为2份，第三列宽度为3份。这个代码定义了三列，所有列的宽度都是100px。
css 网格布局_CSS网格布局Fr单元指南
cune1359的博客
07-01 1112
CSS网格布局模块附带了一个名为fr unit的新CSS 单元 。 fr尽可能简单，是“ fraction”一词的缩写 。 新的单元可以将网格快速切成比例的列或行。 结果，创建完全响应和灵活的网格几乎变得轻而易举。 由于分数单位是与Grid Layout模块一起引入的，因此可以在支持CSS grid的任何浏览器中使用它。 如果您还想支持较旧的浏览器，这里有一个很棒的CSS网格polyfil...
grid布局
weixin_50959040的博客
03-21 2万+
grid布局
CSS基本布局——grid布局
m0_67401545的博客
08-01 1710
Grid布局是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局。
10分钟理解CSS3 Grid布局
weixin_52546522的博客
03-29 936
基本介绍 Grid做前端的同学应该都很熟悉了，翻译成中文为“栅格”，用过bootstrap、semantic ui、ant design的同学肯定都了解grid layout（删格布局），以往css框架中的grid布局一般是通过float和百分比的宽度实现的，这种实现有几种缺点： html不够简洁； 需要清除浮动以避免高度塌陷； 列的个数是固定的，不能灵活定义。比如bootstrap是12列，semantic ui是16列，ant design 24列。 当然grid也可以用flex实现，但是并不会比.
openharmony容器组件之Grid
lplj717的博客
08-09 818
Grid：网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局
grid布局中的grid-template-columns属性和grid-template-rows属性参数说明
最新发布
weixin_43131100的博客
06-13 365
1.grid-template-columns属性（布局需要的竖列）；2.grid-template-rows属性（布局需要的横行）
阮一峰老师 CSS Grid 网格布局教程(转载)
热门推荐
鸭绒的博客
09-30 3万+
特别声明：这篇博客转载于阮一峰老师，转载是为了方便日后复习，实在写的太棒了。 <!-- div class="asset-body" --> <h2>一、概述</h2> 网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的.
CSS 网格
chen_0804的博客
05-28 179
一、display:grid 1、grid-template-columns grid-template-columns属性值的个数表示网格的列数，而每个值表示对应列的宽度。 <style> .d1{background:LightSkyBlue;} .d2{background:LightSalmon;} .d3{background:PaleTurquoise;} .d4{background:LightPink;} .d5{background:PaleGreen;}
CSS布局—网格布局Grid（一）
weichaoya的博客
08-09 2826
CSS网格可以定义由行和列组成的二维布局，然后将元素放置到网格中。有些元素可能只占据网格的一个单元，另一些元素则可能占据多行或多列。网格的大小既可以精确定义，也可以根据自身内容自动计算。你既可以将元素精确地放置到网格某个位置，也可以让其在网格内自动定位，填充划分好的区域。 跟 Flexbox 类似，网格布局也是作用于两级的 DOM 结构。设置为 display: grid 的元素成为一个网格容器（grid container）。它的子元素则变成网格元素（grid items）。 基础网页布局 <.
display：grid；网格布局
weixin_45096939的博客
07-25 2934
display：grid；网格布局，可自适应布局
grid网格布局
cwjxyp的博客
02-14 775
grid布局：二维网格布局，最强大的css布局方案 1、容器属性 grid-template-* grid-template-columns grid-template-columns:100px 100px 100px;有几个值代表有几列，每一列的宽度为多少，不设置默认撑满父元素宽度 grid-template-rows grid-template-rows:100px 100px 100px;有几个值代表有几行，每一行的高度为多少，不设置默认撑满父元素高度 grid-templa
css grid学习笔记
九段刀客的博客
09-23 2316
1、grid-template-areas实现放置指定区域 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap{ width: 300px; height: 300px; display: grid;
CSS - 网格布局（grid）
程序员阿甘的博客
07-20 7044
网格布局、grid、表格布局、二维布局、网格轨道、grid-template-rows、grid-template-columns、grid-template、fr单位、min-content、max-content、minmax、auto-fill、auto-fit、网格单元、网格项目、网格线、grid-row、grid-column、grid-area、网格区域、grid-template-area、网格间距、gap、显示网格、隐式网格、稀疏包装、密集包装、网格单元对齐、网格项目对齐、统一对齐、单独对齐
display: grid；进行布局
l1134的博客
09-18 152
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 60px; align-content: center; align-items: center; justify-content: center; justify-items: center;
grid-template-columns: 1fr
09-06
grid-template-columns: 1fr 是 CSS Grid 布局中的一个属性，用于定义网格容器中列的大小。fr 是一个相对单位，表示网格容器剩余空间的比例。 在这个例子中，grid-template-columns: 1fr 表示网格容器中只有一列，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值