css3 网格容器grid grid-template-rows&column
Flex布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。
Grid布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。
Grid布局远比 Flex 布局强大。
Grid的构成:网格容器+项目
采用网格布局的区域,称为"容器"(container)。容器内部采用网格定位的子元素,称为"项目"
特点:如果没有为盒子设定宽高,那项目的大小会随着网页大小的改变而改变
- grid-template-columns属性定义每一列的列宽
- grid-template-rows属性定义每一行的行高
以上属性可以用repeat,像素,百分比:
- grid-template-columns:repeat(12,1fr);
- grid-template-columns:100px 100px 100px;
- grid-template-columns:20% 30% 50%;
<div class="container">
<!-- .column*12{你好} -->
<div class="column">你好</div>
<div class="column">你好</div>
<div class="column">你好</div>
<div class="column">你好</div>
<div class="column">你好</div>
<div class="column">你好</div>
<div class="column">你好</div>
<div class="column">你好</div>
<div class="column">你好</div>
<div class="column">你好</div>
<div class="column">你好</div>
<div class="column">你好</div>
</div>
css:
(1) grid-template-columns: repeat(12,1fr);
grid-template-columns:属性定义每一份的列宽,12列,占据空间均等)
* {
margin: 0;
padding: 0;
}
.container {
margin: 20px;
/* 将普通盒模型转化为网格容器 */
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.column {
border: 1px solid red;
text-align: center;
background-color: skyblue;
padding: 20px;
}
代码演示:
(2)grid-template-columns: repeat(4,1fr);
代码演示:
(3)在设定好列数(column)的基础上对行数(rows)进行设定,并设定container的宽高
grid-template-rows:repeat(3,1fr);
.container {
width: 600px;
height: 600px;
outline: 1px dashed skyblue;
margin: 0 auto;
/* ===grid-template-columns:100px 100px 100px; */
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
代码演示:
grid-template-rows: 20% 30% 50%;
代码演示:
grid-template-rows: 100px 200px 300px;代码演示:
grid-template-rows: repeat(3,100px);如果(3,100px)只设立一个元素,则代表100px运用到每个元素身上
也可以单独指定元素:grid-template-rows: repeat(3,100px 200px 300px);
grid-template-rows: repeat(3,20%);
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果