Getting started with CSS grid layouts

I believe that everyone is more familiar with the flex layout, the recent study of the wave grid layout, although the compatibility is not too high, the application is not too common, but the function is very powerful. The future should be grid+flex for the mainstream, grid is a two-dimensional layout, very flexible, suitable for the overall structure, and Flex is a one-dimensional layout, suitable for handling local details.

Introduced

• CSS Grid Layout is the most powerful layout system in CSS. This is a two-dimensional system, which means that it can handle both columns and rows, unlike Flexbox, which is primarily a one-dimensional system.

• Compatibility is not very friendly at the moment
  

• Similar to Felx, Grid has 容器 and项目
  • Grid 容器 Property List
    • All properties of Grid Container
    • Display
    • Grid-template-columns
    • Grid-template-rows
    • Grid-template-areas
    • Grid-template
    • Grid-column-gap
    • Grid-row-gap
    • Grid-gap
    • Justify-items
    • Align-items
    • Justify-content
    • Align-content
    • Grid-auto-columns
    • Grid-auto-rows
    • Grid-auto-flow
    • Grid
  • 项目all properties of the Grid
    • Grid-column-start
    • Grid-column-end
    • Grid-row-start
    • Grid-row-end
    • Grid-column
    • Grid-row
    • Grid-area
    • Justify-self
    • Align-self
• Was scared, anyway, the first time I saw it was scared, but nothing, the following will only explain the commonly used
• The following chestnuts are used .grid_box , respectively, to .grid_item refer to 容器 and, and 项目 use the following HTML structure

  <div class="grid_box">    <div class="grid_item">1</div>    <div class="grid_item">2</div>    <div class="grid_item" id="item3">3</div>    <div class="grid_item" id="item4">4</div>    <div class="grid_item">5</div>    <div class="grid_item">6</div>    <div class="grid_item">7</div>    <div class="grid_item">8</div>    <div class="grid_item">9</div>    <div class="grid_item">10</div>    <div class="grid_item">11</div>  </div>  <span>邻居元素</span>

Container Properties Display

• Grid-Generate a block-level (Block-level) grid
• Inline-grid-generates a row-level (Inline-level) grid
• Subgrid-If the container itself is an item, you can use this property to indicate that you want to get its row/column size from its parent node, rather than specifying its own size.

    .grid_box {      background: #054154;      display: inline-grid;    //行级网络，和span处于一行    }    .grid_item {      background: #0490db;      border: 1px solid #fff;    }

    .grid_box {      background: #054154;      display: grid;    //块级网络，将span挤入下一行    }    .grid_item {      background: #0490db;      border: 1px solid #fff;    }

Grid-template-columns/grid-template-rows

• Grid-template-rows is the height of the line

    .grid_box {      background: #054154;      width: 500px;      height: 300px;      display: grid;      grid-template-rows: 60px auto 40px;    }    .grid_item {      background: #0490db;      border: 1px solid #fff;    }

Represents the first row height of 60px, the third row is 40px high, all other rows (not set or auto) Divide the remaining height evenly

• Grid-template-columns is the column width

    .grid_box {      background: #054154;      width: 500px;      height: 300px;      display: grid;      grid-template-rows: 60px auto 40px;      grid-template-columns: 30px 20px auto auto;    }    .grid_item {      background: #0490db;      border: 1px solid #fff;    }

Similar to line height, this represents the first column width 30px, the second column width 20px, the third column fourth column evenly divided the remaining width (and row height is different is the column width is how much you set how many columns, the number of columns and you set the same)

Grid-gap

• The default value for "Grid-gap" is 0, two attributes are abbreviated, the first grid-row-gap (the spacing between rows and rows), the second grid-column-gap (the spacing between columns), and only one value is set, which means that the spacing between rows and columns is equal */

    .grid_box {      background: #054154;      width: 500px;      height: 300px;      display: grid;      grid-template-rows: 60px auto 40px;      grid-template-columns: 30px 20px repeat(2,1fr);      grid-gap: 2px 4px;   //行间距2px,列间距4px    }    .grid_item {      background: #0490db;      border: 1px solid #fff;    }

Some grammatical sugars repeat

• You might ask if there are a lot of columns/rows in the middle, and each is not very cumbersome, so it provides repeat syntax sugar to simplify writing.

.grid_box {    grid-template-columns: 30px 20px auto auto;    grid-template-columns: 30px 20px repeat(2,auto);//等价于}

Fr

• In addition, the flex-like 1,grid also has a similar ' copy unit '--- fr .

.grid_box {    grid-template-columns: 30px 20px auto auto;    grid-template-columns: 30px 20px 1fr 1fr;//等价于    grid-template-columns: 30px 20px repeat(2,1fr);//也等价于}

Minmax

• Minimum value of maximum value
  grid-template-rows: minmax(auto, 30%) 1fr 1fr;Represents the first row high minimum auto, maximum 30%

Project Properties Grid-area

• Monomer operation, control the position of the individual, overriding the overall rule, 4 attributes are Grid-row-start (start line), Grid-column-start (Start row line), Grid-row-end (end line), Grid-column-end (end row line)
• For example, use ITEM3 to operate alone.

    .grid_box {      background: #054154;      width: 500px;      height: 300px;      display: grid;      grid-template-rows: 60px auto 40px;      grid-template-columns: 30px 20px repeat(2,1fr);      grid-gap: 2px 4px;    }    .grid_item {      background: #0490db;      border: 1px solid #fff;    }    #item3{      grid-area: 1 /1/ 2/ 4;    }

grid-area: 1 /1/ 2/ 4;The position of the representative Item3 is that the line 1 to 2, the line 1 to 4, the area of the four lines is the position of item3, is not very strong, too much of this

span, negative

• You may ask if there are a lot of columns/rows in the middle, then the number of lines is not very troublesome, so the optimization
• Similar to the slice in JS, negative numbers mean reciprocal
• and span means merging
• So in this case, the following are equivalent

    #item3{      grid-area: 1 /1/ 2/ 4;       grid-area: 1 /1/ 2/ span 3;//等价      grid-area: 1 /1/ 2/ -2;//等价    }

Order

• If there are two sub-projects overlapping what to do, then you need order to solve the hierarchy problem.
• And index are similar to Z-index, indicating the stacking order, the greater the value, the more on. Negative numbers are allowed.

    .grid_box {      background: #054154;      width: 500px;      height: 300px;      display: grid;      grid-template-rows: 60px auto 40px;      grid-template-columns: 30px 20px repeat(2,1fr);      grid-gap: 2px 4px;    }    .grid_item {      background: #0490db;      border: 1px solid #fff;    }    #item3{      grid-area: 1 /1/ 2/ 4;      order: 1;    }    #item4{      grid-area: 1 /1/ 2/ 4;    }

Because Item3 had order, so item3 covered item4.

Named

• In my opinion, naming is the most powerful place in the grid, you can set the name in the container, and then use the name in the subproject
• Where the dot number . represents an empty grid cell
• Let's say we have a regular layout.

  <div class="grid_box">    <div class="grid_item" id="header">header</div>    <div class="grid_item" id="aside">aside</div>    <div class="grid_item" id="content">content</div>    <div class="grid_item" id="footer">footer</div>  </div>  <span>邻居元素</span>

    .grid_box {      background: #054154;      width: 500px;      height: 300px;      display: grid;      grid-template-rows: 60px auto 40px;      grid-template-columns: 30px 20px repeat(2,1fr);      grid-gap: 2px 4px;      grid-template-areas: "header header header header" "aside . content content" "footer footer footer footer";    }    .grid_item {      background: #0490db;      border: 1px solid #fff;    }    #header{      grid-area: header;    }    #aside{      grid-area: aside;    }    #content{      grid-area: content;    }    #footer{      grid-area: footer;    }

Is it strong?

• In addition, the network line can also be named

  Test
• The above is a number of common, basic use of methods, more in-depth we will discuss later
• If you want to check whether you have a basic grid, you can use the following URL test, is a fun little game

• Small test

At last

Hello everyone, this is "taoland", this blog is mainly used to record a rookie program ape Growth Road. This is my first time to do blog, hope and we have a lot of communication, grow together! The article will be updated synchronously at the following address ...
Personal blog: www.yangyuetao.cn
Small program: Taoland