What's CSS Grid?

CSS Grid Layout (Geotype) is the most powerful layout system in CSS. Unlike the one-dimensional layout of Flexbox, Grid It is designed for a two-dimensional layout, which means that it can handle rows and columns simultaneously. It addresses the long-standing pains of "complex framework alignment", "asymmetrical layout" and "overlapping elements" in web design, which would have required a lot of effort. The Hack technique code becomes elegant and easy to maintain.

Grid, the core edge of the layout.

Real 2D control: Complex column structures can be achieved without the need for a multi-layer container.
Precision spacing management: gap Properties allow you to control the line spacing and to leave the load completely unwieldy margin Offset.
Response mode minmax: Complement minmax() function, you can easily create a smart grid that shrinks under a small screen and expands automatically under a large screen.
Area Naming: Support for adoption grid-template-areas Nams the layout blocks to give the code a very high readability.

Common Layout Program Parsing

Holy Grail layout: It consists of the header, footer, main content area and two sidebars, both of which are left and right. Using Grid, you can define it precisely by using a few lines of code.
Response album: Utilization repeat(auto-fit, minmax(200px, 1fr)) , allows the album to automatically adjust the number of pictures shown per line at different screen widths.
dashboard (Dashboard): Grid systems are well suited to build data panels that can easily handle the error-ordering of different size cards.

Common issues (FAQ)

Q: Grid and Flexbox, which one?
A: The rule is simple: if you just have to sort out one line (or a column) of elements, use Flexbox； If you need to build a complete page frame or complex row interactive, use Grid.

Q: 1fr What does that mean?
A: fr It is a fractional unit. 1fr This means taking a share of the available space. If there are two columns, 1fr And they split the space.

Q: How's compatibility?
A: Modern mainstream browsers are perfect for CSS Grid. For very few old browsers, it is recommended to provide simple Flexbox As a downgrading programme.