grid布局

泡面加火腿
257 阅读6分钟

之前的项目中一直都是使用flex来布局，最近看别人的项目发现有一些是使用grid来布局，借此机会来系统的学习grid的布局。

本文是以《CSS Grid网格布局教程》为学习资料。

1. grid与flex

  1. 相同点：都可以通过指定容器内部多个项目的位置。
  2. 不同点：
  • flex布局只是指定项目针对轴线的位置，是一维布局；
  • grid布局是将容器划分为行和列，形成单元格，然后指定项目所在的单元格，是二维布局。

2. grid基本概念

  1. 容器：采用grid布局的区域；
  2. 项目：容器内部采用网格定位的子元素（直接子元素）；
  3. 行：容器里的水平区域；
  4. 列：容器里垂直区域；
  5. 单元格：行和列交叉的区域；
  6. 网格线：划分网格的线。

3. 容器的属性

1）.  容器属性的含义

  1. display：grid / inline-grid； 给容器设置grid布局模式
  2. grid-template-columns：定义每一列的列宽；
  3. grid-template-rows：定义每一行的行高；
  4. grid-row-gap：设置行间距；
  5. grid-column-gap：设置列间距；
  6. grid-gap：是grid-row-gap 和 grid-column-gap的简写；
  7. grid-template-areas：网格布局允许指定区域，一个区域由单个或多个单元格组成；
  8. grid-auto-flow：设置子元素的放置顺序，默认是先行后列；
  9. justify-items：设置单元格内容的水平位置（左中右），默认stretch；
  10. align-items：设置单元格内容的垂直位置（上中下），默认stretch；
  11. place-items: 是justify-items和align-items简写；
  12. justify-content: 是整个内容区域在容器里的水平位置（左中右）；
  13. align-content：是整个内容区域的垂直位置（上中下）；
  14. place-content：是justify-content和align-content的简写；
  15. grid-auto-columns：设置浏览器自动创建多余网格的列宽；
  16. grid-auto-rows：设置浏览器自动创建多余网格的行高；
  17. gird-template：是grid-template-columns，grid-template-rows，grid-template-areas这三个属性的简写；
  18. grid：是grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, gird-auto-columns, grid-auto-flow这6个属性的简写。

2）. 容器属性的使用

  1. display：grid / inline-grid

    .container{
    display: inline-grid / grid;
}

  2. grid-template-columns 和 grid-template-rows

    // 生成一个三行三列，列宽为100px，行高为100px的网格

// 基本写法
.container {
   display: grid;
   grid-template-columns: 100px 100px 100px;
   grid-template-rows: 100px 100px 100px;
}

 // ***********************************************************
 // 使用百分比
.container {
   grid-template-columns: 33.33% 33.33% 33.33%;
   grid-template-rows: 33.33% 33.33% 33.33%；
}

// ***********************************************************
// 简化写法-- repeat()之重复单个值
// repeat(): 接收两个参数，第一个是重复次数，第二个是重复值
.container {
   grid-template-columns: repeat(3, 100px);
   grid-template-rows: repeat(3, 100px);
}

// ***********************************************************
// 简化写法-- repeat()之重复某个模式
// repeat(): 接收两个参数，第一个是重复次数，第二个是重复的模式
.container {
   grid-template-columns: repeat(2, 10px 20px 30px);
   // 第一列和第四列宽为10px；第二列和第五列宽为20px；第三列和第六列宽为30px 
}

// ***********************************************************
// auto-fill
// 当单元格大小固定，容器大小不定时，
// 希望每一行尽可能多的容纳单元格，使用auto-fill表示会自动填充
.container {
   grid-template-columns: repeat(auto-fill, 100px);
}

// ***********************************************************
// fr 关键字, 方便表示比例关系
// fr是fraction的缩写，意思为：片段
// eg: 2fr 是 1fr的两倍.container {
    grid-template-columns: lfr 2fr;
    //grid-template-columns: 100px 1fr 1fr; // 可以结合使用
}

// ***********************************************************

// minmax(): 该函数产生一个长度范围，表示长度就在该范围中
// 接收两个参数，分别是最小值，最大值
.container {
    grid-template-columns: 1fr 2fr minmax(100px, 1fr);
}

// ***********************************************************
// auto关键字：由浏览器自己决定长度
.container {
    grid-template-columns: 100px auto 50px;
}

// ***********************************************************
// 设置网格线名称
.container {
    grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
    grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4];
}

  3. grid-row-gap, grid-column-gap, grid-gap

    .container {
    //设置行间距
    grid-row-gap: 20px;
    //设置列间距
    grid-column-gap: 20px;
}

// 使用简写方式： grid-gap: <grid-row-gap> <gird-column-gap>;
// 如果grid-gap省略了第二个值，浏览器会默认第二个值等于第一个值
// 最新标准中，这三个属性前的grid-属性已经删除
.container{
    grid-gap: 20px 20px;
}

  4. grid-template-areas

    // 先划出9个单元格, 然后分别命名为a-i
.container{
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-template-areas: 'a b c' 'd e f' 'g h i';
}

  5. grid-auto-flow

    .container{
    grid-auto-flow: column; // 先列后行
    grid-auto-flow: row;    // 先行后列， 默认值
}

// ***********************************************************
// row dense， column dense: 指定位置以后，剩下的项目怎么自动放置
// 尽可能的紧密填满，尽量不出现空格
.container{
    grid-auto-flow: row dense;
    grid-auto-flow: column dense;
}

  6. justify-items, align-items, place-items

    // 属性值： start | end | center | stretch
// start: 对齐单元格的起始边缘
// end：对齐单元格的结束边缘
// center：单元格内部居中对齐
// stretch： 拉伸，占满单元格的整个宽度， 默认值

.container{
    justify-items: start | end | center | stretch;
    align-items: start | end | center | stretch;
}

// place-items: <align-items> <justify-items>
// 省略第二个参数，则默认第二个参数等于第一个参数
.container{
   place-items: start end;
}

  7. justify-content, align-content, place-content

    // 属性值： start | end | center | stretch | space-around 
            | space-between | space-evenly

// start: 对齐容器的起始边框
// end：对齐容器的结束边框
// center：容器内部居中
// stretch：项目大小没有指定时，拉伸占据整个网格容器
// space-around：每个项目两侧间距相等，项目之间的间隔比项目与容器的间距大一倍
// space-between：项目与项目的间隔相等，项目与容器间无间隔
// space-evenly：项目与项目间隔相等，项目与容器也是同样的间隔

.container{
    justify-content: start;
    align-content: start;
}

// place-content: <align-content> <justify-content>;
.container{
    place-content: space-around space-evenly;
}

4. 项目的属性

1）. 项目属性的含义

  1. grid-column-start: 左边框所在的垂直网格线
  2. grid-column-end: 右边框所在的垂直网格线
  3. grid-row-start: 上边框所在的水平网格线
  4. grid-row-end: 下边框所在的水平网格线
  5. grid-column: 是grid-column-start 和 grid-column-end的简写
  6. grid-row：是grid-row-start 和 grid-row-end的简写
  7. grid-area：指定项目放在哪个区域
  8. justify-self: 设置单元格内容的水平位置（左中右）
  9. align-self：设置单元格内容的垂直位置（上中下）

2）. 项目属性的使用

  1. grid-column-start， grid-column-end， grid-column

    .item1{
    grid-column-start: 2;
    grid-column-end: 4;
}
// grid-column: <grid-column-start>/<grid-column-end>
.item1{
   grid-column: 2/4;
}

  2. grid-row-start， grid-row-end， grid-row

    .item1{
   grid-row-start: 1;
   grid-row-end: 2;
}
// grid-row: <grid-row-start> / <grid-row-end>
.item1{
   grid-row: 1/2;
}

  3. grid-area

    .item1{
   grid-area: d; // 单元格名称
}

  4. justify-self, align-self, place-self

    // 属性值：start | end | center | stretch

// start: 对齐单元格的起始边缘
// end：对齐单元格的结束边缘
// center：单元格内部居中对齐
// stretch：拉伸，占满单元格的整个宽度，默认值

.item1{
   justify-self: center;
   align-self: center;
}

// place-self: <align-self> <justify-self>;
// 省略第二个值，则默认第二个值等于第一个值
.item1{
   place-self: center center;
}

5. 项目实战

6. 总结

参考资料：

avatar
文章
阅读
粉丝