Grid layout classic case — pure dry, no chicken soup

Grid Usage guide for grid layout

Online Demo access Github

Attributes used by the grid layout parent element

Grid-template-rows defines rows for the grid layout;

• Split the height three times

.container{
    grid-template-rows:1fr 1fr 1fr; //
}
Copy the code

• Set the height to a fixed value

.container{ grid-template-rows:100px 100px 100px; // Or write repeate(100px)}Copy the code

• Give each line a name

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}
Copy the code

Grid-tempe-columns Defines the columns of the grid layout

See grid-template-rows for the usage

Grid-gap compound property that defines the size of the spacing between columns and columns in a grid layout.

.container{ grid-gap:10px 10px; // [row interval column interval]}

The justify – items defined child elements in the grid layout of horizontal layout, the possible value [start | | end center | stretch]

The align – items defined grid layout is the layout of the child elements in the vertical direction, the possible value [start | | end center | stretch]

Demo1 text and text mix

Demo2 baidu hot word

Demo3 Baidu News

Demo4 Taobao selection

Demo5 Quality life home

Not scratchable latex

Demo7 Magic Box demo