CSS Grid layout is the most powerful CSS layout system available today. Unlike flexbox’s one-dimensional layout system, CSS Grid layout is a two-dimensional layout system, which means it can handle columns and rows at the same time. You can easily use a Grid Grid layout by applying CSS rules to both the parent element (which becomes a Grid Container) and its children (which becomes a Grid Items).

The Grid layout has the most properties of any current layout, and it’s easy for beginners to get off the Grid. Here are three sites to learn the Grid layout just to get you started.

GRID GARDEN games

Grow your carrot GARDEN by writing CSS code in GRID GARDEN! Learning about the Grid through games is fun.

Check out the Grid Container, Grid-Template, and Grid-area properties in a visual way. So you don’t get stuck with complex apis.Resource links:GRID GARDEN

CSS Grid Generator Online Generator

CSS Grid Generator is a free tool created by Sarah Drasner. It is a visual design tool that allows you to create a basic Grid layout and then use the generated code to help you quickly lay it out.

Take the Grail layout for example

This can be done easily by modifying the margins and raster and then viewing the generated codeThe generated sample code is as follows

<div class="parent">
<div class="div1"> </div>
<div class="div2"> </div>
<div class="div3"> </div>
<div class="div4"> </div>
<div class="div5"> </div>
</div>
Copy the code
.parent {
display: grid;
grid-template-columns: repeat(6.1fr);
grid-template-rows: 2fr repeat(5.1fr) 1.5fr;
grid-column-gap: 20px;
grid-row-gap: 20px;
}

.div1 { grid-area: 1 / 1 / 2 / 7; }
.div2 { grid-area: 2 / 1 / 7 / 2; }
.div3 { grid-area: 7 / 1 / 8 / 7; }
.div4 { grid-area: 2 / 6 / 7 / 7; }
.div5 { grid-area: 2 / 2 / 7 / 6; }
Copy the code

Grid layout is the art of grids. It is also important to build a raster-based mindset. CSS Grid Generator can help you understand the overall layout faster.

Resource link: CSS Grid Generator

A Complete Guide to Grid

CSS Tricks is an excellent foreign front-end development blog, which mainly shares the tips, experiences and tutorials of using CSS styles. Foreign sites worth reading for front-end developers.

A Complete Guide to Grid is A Complete Guide to Grid layout for Guides, Guides, Guides, Guides, Guides, Guides and Guides. The tutorial is of high quality and worth watching.

Css-tricks is a great site, especially for CSSer. The site is constantly updating some great tutorials and Tricks, which makes a great contribution to the front-end community.

A Complete Guide to Grid

Grid Layout learning key points

  1. How to make good use of grid-Template series properties to divide design draft reasonably to rasterize.
display
grid-template-columns
grid-template-rows
grid-gap
grid-template-areas
grid-auto-flow
grid-auto-columns:
Copy the code
  1. How to use the grid-Area series attribute to locate the contents inside the container
Grid-column-start grid-column-end grid-row-start grid-row-end grid-column. grid-row grid-areaCopy the code
  1. There are also some properties relative to axis positioning, such as justify-item and align-content, that are roughly consistent with flex layout. Transferable learning
justify-item
justify-content
justify-self
align-item
align-content
align-self
Copy the code

conclusion

In 2021, browser compatibility issues are no longer the biggest problem. Grid layout is extremely adaptable and flexible. Grid will not replace Flex, but they are a great partner.

❤️ Thank you all

If you found this helpful:

Like support, let more people can also see this content.

Pay attention to the public number xianyu love front end, we learn together and progress together.

If you feel good, you can also read other articles (thanks to friends for their encouragement and support 🌹🌹🌹) :

Nodejs implements periodic crawlers

React-query makes your state management more elegant

Front-end page layout learning artifact

A deep copy of the interview essentials

Principle and implementation of SPA front-end routing