CSS中Grid布局的属性认识

1.grid 布局grid是 css 中的一种新的布局方式，对盒子和盒子内容的位置及尺寸有很强的控制能力。与 flex 不同，flex 着重于单轴，而 grid 适应于多轴。2. 基本概念设置 display: grid; 的元素称为容器，它的直接子元素称为项目，但注意子孙元素不是项目。grid line：网格线，构成 grid 布局的结构，分为水平和竖直两种。grid track：两条相邻网格线之间的空间，可以认为是一行或者一列。grid cell：两条相邻行和相邻列之间分割线组成的空间，是 grid 布局中的一个单元。grid area：四条网格线包裹的全部空间，任意数量的 grid cell 组成一个 grid area。3. 容器属性grid-template 系列grid-template-columnsgrid-template-rowsgrid-template-areasgrid-gap 系列grid-column-gapgrid-row-gapplace-items 系列justify-itemsalign-itemsplace-content 系列justify-contentalign-contentgrid 系列grid-auto-columnsgrid-auto-rowsgrid-auto-flow

标签服务器

更多资讯