Grid layout of CSS layout-display: grid; display: inline-grid;

foreword

There are many types of CSS layouts, float floating layout, flex elastic box layout, percentage layout, holy grail layout, double flying wing layout, table layout. Grid layout is similar to table layout, but more flexible than it.

grid layout

By setting display: grid; display: inline-grid;the attribute , the element becomes the grid grid layout container, and the direct child element becomes the item. The grid layout is to set the relevant CSS properties for the container container and the direct sub-element item to achieve the purpose of the layout.

Look directly at the example

Now, in the form of examples, write down the functions and usages of grid layout-related CSS properties through SCSS for easy search and use.

Grid.jsx

import React, {
    
     Component } from 'react'
import './grid.scss'

export default class Grid extends Component {
    
    
  render() {
    
    
    return (
      <>
        <h1>Grid Layout</h1>
        <ul className="grid-list">
          <li className="item item-1">1</li>
          <li className="item item-2">2</li>
          <li className="item item-3">3</li>
          <li className="item item-4">4</li>
          <li className="item item-5">5</li>
          <li className="item item-6">6</li>
          <li className="item item-7">7</li>
          <li className="item item-8">8</li>
          <li className="item item-9">9</li>
        </ul>
      </>
    )
  }
}

grid.scss

.grid-list{
    
    
  // 2种显示方式，grid 块级， inline-grid 行内
  display: grid;
  // display: inline-grid;

  // 定义 行列数
  // 绝对单位定义行列
  // grid-template-rows: 100px 100px 100px;
  // grid-template-columns: 100px 100px 100px;  // 3行3列，绝对单位

  // 百分比定义行列
  // grid-template-rows: 33.33% 33.33% 33.33%; // 百分比
  // grid-template-columns: 33.33% 33.33% 33.33%;

  // 重复函数 repeat(count, value); 1参重复次数，2参重复的值
  // grid-template-columns: repeat(3, 33.33%);  // 重复函数
  // grid-template-rows: repeat(3, 33.33%);

  // 重复模式 repeat(count, patten);
  // grid-template-columns: repeat(2, 100px 20px 60px); // 重复模式，第1和第4是100px
  
  // auto-fill,自动填充，cell大小固定，容器大小不确定，填满容器
  // grid-template-columns: repeat(auto-fill, 100px); 

  // 比例关系 fr, 即 fraction片段
  // grid-template-columns: 1fr 2fr; // fr

  // fr结合绝对单位，fr分剩余空间
  // grid-template-columns: 150px 1fr 2fr;

  // minmax函数，最小最大范围，列宽最小100px，最大1fr
  // grid-template-columns: minmax(100px, 1fr); // minmax函数

  // auto，由浏览器决定长度
  // grid-template-columns: 100px auto 100px;
  
  // 使用中括号指定网格线名称
  // 3行 x 3列，因此有4根垂直网格线和4根水平网格线, 允许同一根线多个名字
  // grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; 
  // grid-template-rows: [r1 row1] 100px [r2] 100px [r3] auto [r4]; 

  // // 两栏式布局
  // grid-template-columns: 70% 30%;

  // 12网格布局
  // grid-template-columns: repeat(12, 1fr);

  // grid-row-gap, grid-column-gap, grid-gap
  // 行间距，列间距，合并简写 grid-gap: <grid-row-gap> <grid-column-gap>
  // grid-row-gap: 10px;
  // grid-column-gap: 10px;

  // grid-gap 合并简写
  // grid-gap: 10px 10px;
  // grid-gap: 10px; // 省略第2个值，则2个值一致
  // // 最新标准，gap三个属性名前缀 grid- 已删除，写成 row-gap,column-gap, gap
  gap: 20px;

  // grid-template-areas 定义区域 area
  // 划分9个单元格，定名为a到i的九个区域，对应九个单元格
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  // grid-template-areas: 'a b c'
  //                      'd e f'
  //                      'g h i';
  
  // // 多个单元格合并成一个区域，9个单元格分成a、b、c三个区域
  // grid-template-areas: 'a a a'
  //                      'b b b'
  //                      'c c c';

  // // 布局实例
  grid-template-areas: "header header header"
                       "main main sidebar"
                       "footer footer footer";
  // // 区域不需要利用，用点 . 表示
  // // 中间一列为点，表示没有用到该单元格，或者单元格不属于任何区域
  // grid-template-areas: 'a . c'
  //                       'd . f'
  //                       'g . i';

  // 区域命名会影响网格线，区域起始网格线 '区域名-start'
  // 终止网格线 '区域名-end',如 'header-start'

  // // 网格放置顺序，默认row，先行后列
  // grid-auto-flow: row; // 填满第一行，再填第二行
  // grid-auto-flow: column; // 先列后行
  // dense密集紧密，尽量填满空格
  grid-auto-flow: row dense; // 行紧密排列
  // grid-auto-flow: column dense; // 列紧密排列

  // // 单元格内容位置，默认为 stretch拉伸占满单元格，这时子元素不需要设置宽高会填满grid
  // // start,center,end需要子元素设置宽高，不然按内容宽高渲染
  // justify-items: start; // 单元格内容水平位置
  // align-items: center; // 单元格内容垂直位置

  // place-items 合并简写
  // place-items: <align-items> <justify-items>;
  place-items: center center;

  // 整个grid内容分布排列位置
  // justify-content, align-content
  // start, end, center, stretch
  // space-around, space-between, space-evenly
  justify-content: center; // 水平分布
  align-content: end; // 垂直分布
  // place-content 合并简写, 先align，后 justify
  // place-content: <align-content> <justify-content>
  place-content: center start;

  // 把item的位置指定在定义的网格外部，浏览器会自动生成多余的网格
  // grid-auto-rows就是用来设置自动生成网格的列高和行宽
  grid-auto-rows: 60px;
  grid-auto-columns: 100px;

  // 合并写法
  // grid-template: <grid-template-rows> / <grid-template-columns> / <grid-template-areas>;
  // grid-template: repeat(3, 100px) / repeat(3, 100px);

  // grid: grid-template-rows、grid-template-columns、grid-template-areas、
  //       grid-auto-rows、grid-auto-columns、grid-auto-flow
  // 这六个属性的合并简写
  // grid: 100px 100px 100px / 100px 100px 100px;
  
  // item项目属性
  li{
    
    
    display: flex;
    width: 50%;
    height: 50%;
    justify-content: center;
    align-items: center;
    list-style: none;
    background: #ff8686;
    color: #fff;
    &.item-1{
    
    
      // 指定item位置，4个边框定位在哪根网格线
      // // 指定网格线序号
      // grid-column-start: 1;
      // grid-column-end: 3;
      // grid-row-start: 1;
      // grid-row-end: 2;
 
      // 指定网格线名字，
      // grid-template-rows, grid-template-columns, grid-template-areas 名字都可以
      // grid-column-start: footer-start;
      // grid-column-end: footer-end;
      // grid-row-start: footer-start;
      // grid-row-end: footer-end;

      // span，跨度，上下、左右跨跃多少个网格
      grid-column-start: span 2;
      grid-column-end: span 2;

      // grid-column, grid-row是合并简写
      // grid-column: <start-line> / <end-line>
      // grid-row: <start-line> / <end-line>
      grid-column: 1 / 3; // 等于指定网格线序号
      grid-row: 1 / 2;

      // grid-column, grid-row属性也可以用 span
      grid-column: 1 / span 2; // 等同于 grid-column: 1 / 3;
      grid-row: 1 / span 2; // 等同于 grid-row: 1 / 3;

      // 斜杆 / 和后面的部分可以省略，默认跨越一个网格
      grid-column: 1;
      grid-row: 1;

      // grid-area 指定item放在哪个区域， area在父容器声明
      grid-area: header;

      // grid-area 也可以是合并简写, 指定item的位置
      // grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;
      // grid-area: 1 / 1 / 3 / 3;

      // 和justify-items属性的用法完全相同，但只作用于单个item
      // 水平位置: start,center,end,stretch拉伸
      justify-self: start;
      
      // 垂直位置
      align-self: end;
      
      // place-self 合并简写: 先垂直align-self，后水平justify-self
      // place-self: <align-self> <justify-self>;
      place-self: center start;
      // 如果省略第二个值，则2个值相等
      place-self: center;
    }
    &.item-2{
    
    
      background: #333;
    }
    &.item-3{
    
    
      background: #833;
    }
    &.item-4{
    
    
      background: #9aa;
    }
    &.item-5{
    
    
      background: #aa8;
    }
    &.item-6{
    
    
      background: #804;
    }
    &.item-7{
    
    
      background: #6ee;
    }
    &.item-8{
    
    
      background: #a8a;
      // 指定item的位置在定义的网格外部，浏览器会自动生成多余的网格
      grid-row-start: 4;
      grid-column-start: 2;
    }
    &.item-9{
    
    
      background: #d84e9a;
      grid-row-start: 5;
      grid-column-start: 3;
    }
  }
}