深入理解CSS Grid布局-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_47161711/article/details/116462542

本文详细介绍了CSS Grid布局的关键概念，包括gird-template-*, grid-template-areas, grid-auto-flow, 对齐方式如justify-items和align-items，以及如何使用grid-column-start, grid-column-end, grid-row-start, grid-row-end和grid-area来精确控制网格布局。内容涵盖从基本用法到高级技巧，如使用fr单位和minmax()函数适应不同尺寸容器。" 131314233,5694251,Matlab实现LPC线性预测分析,"['信号处理', '数学建模', 'Matlab']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css

学习gird布局

#
 -1 grid-template-columns
 -2 grid-template-rows
 -3 grid-template-gap
 -4 grid-column-gap
 -5 grid-gap    (3,4的简写)
 -6 grid-template-areas
 -7 gird-auto-flow
 -8 justify-items
 -9 align-items
 -10 place-items    (8和9的简写)
 -11 justify-content
 -12 align-content
 -13 place-content  (11和12的缩写)
 -14 grid-auto-columns
 -15 grid-auto-rows

gird-template-*

填写相应的个数,不填写,自动分配

repat() ,第一个参数是重复的次数,第二个参数是所重复的值

grid-template-columns:100px 100px 100px;

grid-template-columns: repeat(3, 100px)

grid-template-columns: repeat(auto-fill,100px)

auto-fill ,有时候单元格的大小是固定的,但是容器的大小不确定,这属性就会自动填充

fr,为了方便表示比例关系,网格布局提供了fr关键字(fraction的缩写,意为片段)

grid-template-columns: repeat(4, 1fr); 宽度平均分为4份

grid-template-columns:1fr minmax(150px , 1fr)

minmax() 函数产生一个长度范围,表示长度就在这个范围之中,它接受两个参数,分别为最小值和最大值

grid-template-areas

一个区域由单个或多个单元格组成,

grid-template-areas:'a b c'
                    'd e f'
                    'g h i';

grid-auto-flow

grid-auto-flow: row;

grid-auto-flow: row dense;

justify-items(水平方向)/align-items(垂直方向)

设置单元格内容的水平个垂直的对齐方式

justify-item: start | end | center | stretch;

写在容器上

place-items

容器属性 justify-content (水平方向) 和 align-content (垂直方向)

项目属性: grid-column-syart / grid-column-end grid-row-start / grid-row-end

用来指定item的具体位置,根据在哪根网线

简写
grid-column :1/3 从第一个开始到第三个结束
span

占多少格

grid-area

指定项目放在哪个区域

grid-area 属性还可以作grid-row-start 、 grid-column-start 、grid-row-end grid-column-end的合并简写形式,直接指定项目位置

grid-template-areas:'aaa' 'bbb' 'ccc'
grid-area: b;

# 可以写成
grid-area:<row-start>/<column-start>/<row-end>/<column-end>
grid-area: 1/1/3/3