Grid布局是一种二维布局系统,可以将页面划分为行和列,并将元素放置在这些行和列的交叉点上。以下是Grid布局的一些常用属性:
grid-template-columns/grid-template-rows:用于定义网格的列和行的大小和数量。可以指定具体的尺寸值(如px、em等),也可以使用fr单位表示剩余空间的比例分配。
.container {
display: grid;
grid-template-columns: 100px 200px 300px;//第一列100px,第二列200px,第三列300px
grid-template-rows: 50px 100px;//第一行高50px,第二行高100px
}
grid-column-gap/grid-row-gap:用于定义网格的列间距和行间距。可以使用具体的尺寸值或百分比。
grid-gap:grid-row-gap 和 grid-column-gap 的简写属性
语法:
grid-gap: grid-row-gap grid-column-gap;
.container {
display: grid;
grid-gap: 10px;//网格元素间距为10px
}
grid-template-areas:用于定义网格区域的布局。通过给每个网格区域命名,然后使用这些名称来指定元素在网格中的位置。
grid-auto-columns/grid-auto-rows:用于定义没有显式指定大小的网格的列和行的大小。可以使用具体的尺寸值或百分比。
grid-auto-flow:用于定义未显式放置在网格中的元素的放置方式。可以设置为"row"、“column"或"dense”。
justify-items/align-items:用于定义网格中所有元素的水平对齐方式和垂直对齐方式。
.item {
justify-items: center; /* 水平居中对齐 */
align-items: end; /* 底部对齐 */
}
justify-self/align-self:用于定义单个网格元素的水平对齐方式和垂直对齐方式,会覆盖父级的对齐方式。
grid-column-start/grid-column-end/grid-row-start/grid-row-end:用于定义单个网格元素的起始位置和结束位置。可以使用具体的网格线编号、span关键字或auto值。
grid-column: grid-column-start 和 grid-column-end 的简写属性
语法:
grid-column: grid-column-start / grid-column-end;
grid-row:grid-row-start 和 grid-row-end 的简写属性
语法:
grid-row:grid-row-start / grid-row-end ;
.item {
grid-column: 2 / 4; /* 从第2列到第4列 */
grid-row: 1 / 3; /* 从第1行到第3行 */
}
justify-content 和 align-content:设置网格容器中的内容在容器中的对齐方式。
.container {
display: grid;
justify-content: center; /* 水平居中对齐 */
align-content: end; /* 底部对齐 */
}
这些属性可以通过在父元素上设置display属性为grid或inline-grid来启用Grid布局。通过调整这些属性的值,可以实现灵活的网格布局效果。
适用场景:
复杂的布局:CSS Grid布局非常适合创建复杂的网格布局,例如新闻网站的首页或仪表板。
响应式设计:由于CSS Grid布局的灵活性,它非常适合用于响应式设计,以适应不同的屏幕尺寸和设备。
网格嵌套:如果您需要在网格单元格中创建更复杂的嵌套结构,CSS Grid布局是一个很好的选择。
对齐和排序:如果您需要对网格中的元素进行精确的对齐和排序,CSS Grid布局提供了强大的功能。
示例:
.left-list {
display: grid;
grid-template-columns: repeat(2, 1fr); //宽度平均分成两等份
grid-column-rows: repeat(2, 1fr); //高度平均分成两等份
grid-template-areas: 'a b' 'a b'; //将现有的四个单元格定义为第一行a b ,第二行a b
justify-content: center;
align-items: center;
margin-top: 10px;
}
.left-list-img {
grid-area: a; //对应a区域
width: 50px;
height: 50px;
border-radius: 5px;
}
.left-list-title {
grid-area: b; //对应b区域
}
CSS Grid文档戳这里
文档上示例解读:
首先了解一些基础知识,帮助我们更好的理解
CSS 网格布局,可在线尝试
网格列:网格元素的垂直线方向称为列(Column)
网格行:网格元素的水平线方向称为行(Row)
网格间距(Column Gap)指的是两个网格单元之间的网格横向间距或网格纵向间距。
最重要的是网格线:
列与列,行与行之间的交接处就是网格线。
Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。文章来源:https://www.toymoban.com/news/detail-663416.html
例如下面这个三列两行的网格中,就拥有四条纵向的网格线(灰色圆圈标记),以及三条横向的网格线(黑色圆圈标记)
看懂上面这张图后,其实网格线column列就是从纵向的第一根开始,1-4,纵向有四根网格线
row行就是从横向的第一根开始,1-3,横向有三根网格线
下图则定义了四条纵向的网格线,以及四条横向的网格线:
grid-column是grid-column-start 和 grid-column-end 的简写属性,如果只有一个值代表独占一列,如果两个值代表开始位置与结束位置
grid-row是grid-row-start 和 grid-row-end 的简写属性,如果只有一个值代表独占一行,如果两个值代表开始位置与结束位置文章来源地址https://www.toymoban.com/news/detail-663416.html
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
.wrapper {
display: grid;//开启grid布局
grid-template-columns: repeat(3, 1fr);//等宽分为3等份
gap: 10px;//网格单元格之间的间距为10px
grid-auto-rows: minmax(100px, auto);//网格自动调整行高,最小高度100px,最大高度自动调整
}
.one {
grid-column: 1 / 3;//纵向第一根网格线到第三根网格线,即第一到第二列
grid-row: 1;//横向独占第一行
}
.two {
grid-column: 2 / 4;//纵向第二根网格线到第四根网格线,即第二到第三列,因为都有第二列,所以第二列重合了
grid-row: 1 / 3;//横向第一根网格线到第三根网格线,即第一到第二行
}
.three {
grid-column: 1;//纵向独占第一列
grid-row: 2 / 5;//横向第二根网格线到第五根网格线,即第二到第四行
}
.four {
grid-column: 3;//纵向独占第三列
grid-row: 3;//横向独占第三行
}
.five {
grid-column: 2;//纵向独占第二列
grid-row: 4;//横向独占第四行
}
.six {
grid-column: 3;//纵向独占第三列
grid-row: 4;//横向独占第四行
}
到了这里,关于【CSS Grid网格布局】常用属性,示例代码解读的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!