CSS Grid Layout complete guide # flight.archives003

This is the fourth day of my participation in the August More text Challenge. For details, see:August is more challenging

Complete guide # flight.archives003

Preface: After writing this article, I’m ready to go all the way, including the flight sections, and see the road ahead. I want to do the most simple and efficient front-end tutorial // express the most arrogant personality

In March 2017, major browsers updated their support for the Grid. This is the most powerful CSS layout scheme. It divides web pages into grids and makes a variety of layouts. What was previously only possible with sophisticated CSS frameworks is now built into the browser.

Introduction to the Tag/Grid layout

.container{
    display:grid; /*or inline-grid*/
}
Copy the code

The container element is the Grid container, and the direct child of the. Container element is the Grid project. The dividing Line of the Grid is called Grid Line, and the interval between two adjacent Grid lines is called Grid Track. A single Grid is called a Grid Cell, and a block surrounded by multiple Grid lines is called a Grid Area

Tag/Grid Container properties

Tag/Grid Item attribute

->> Details

Container properties –grid-template-columns.grid-template-rows

Value:

grid-template-columns: 100px 1fr; */ grid-template- Columns: [linename] 100px; [linenameA linenameB] 100px [linenameB linenameB] 100px [linenameB linenameB] 100px [linenameB linenameB] 100px; Columns: [linenameA linenameB]; columns: [linenameB linenameB]; /* You can define only the name, but not the size */Copy the code

Special content introduction:

1. Repeat () function

   The CSS function repeat(times, value) can simplify the cumbersome input of repeated values

   .container {
       display: grid;
       grid-template-columns: repeat(4.25%); /* Template-columns: columns... * /
       grid-template-rows: repeat(2.50px 100px 80px); /* Equates to grid-template-columns: 50px 100px 80px 50px 100px 80px; * /
   }
   Copy the code

   Special note: The Times parameter accepts the auto-fill and auto-fit keywords and is applicable when the container size is not fixed

   Grid-template-columns: repeat(auto-fill, 100px) /* Place 100px items in a row until the row is filled */Copy the code

   • auto-fillRepresents an automatic determination of the number of repeats to populate each row/column with as many items as possible
   • auto-fitRepresents an automatic determination of the number of repeats to fill as much space as possible in each row/column

   In the case of variables such as the minmax() function, the two may behave differently. Demo: codepen. IO/flightmaker…

2. The length unit fr” fr” is short for “Fraction “(” fragment “) and can be used to specify width ratios

   .container {
       display:grid;
       grid-template-columns: 200px 1fr 2fr;
   }
   Copy the code

   Fr units can be used with absolute units. The above code specifies that the first line is 200px and the second line is half the width of the third line

3. A keyword used to control size

   • min-contentAllocation minimum width
   • max-contentAllocate maximum width
   • fit-contentThe width of the allocation ismin-content 和 max-contentbetween
   • autoAutomatic width allocation

4. The size control function minmax(min, Max) takes two arguments, representing a length range, indicating a width not less than min but not more than Max. If you define only one, you can use the min() and Max () functions

Container properties –grid-template-areas

Value:

/*<string>+*/ grid-template-areas: "a a a" "b c c"; /* Grid -template-areas */ Grid -template-areas: "a a." "b c c"; You can specify a block as empty */Copy the code

Project Attributes –grid

Value:

/*<'grid-template'> (grid-template-columns and grid-template-rows) */ Grid: "a" 100px "b" 1fr; grid: [linename1] "a" 100px [linename2]; grid: "a" 200px "b" min-content; grid: "a" minmax(100px, max-content) "b" 20%; /* <'grid-template-rows'> / [ auto-flow && dense? ]  <'grid-auto-columns'> */ grid: 200px / auto-flow; grid: 30% / auto-flow dense; grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px; grid: [line1] minmax(20em, max-content) / auto-flow dense 40%; /* [ auto-flow && dense? ]  <'grid-auto-rows'>? / <'grid-template-columns'>*/ grid: auto-flow / 200px; grid: auto-flow dense / 30%; grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px); grid: auto-flow dense 40% / [line1] minmax(20em, max-content);Copy the code

This property has a negative impact on the legibility of the code.

->> Reference link

MDN Chinese document developer.mozilla.org/zh-CN/docs/…

MDN English document developer.mozilla.org/en-US/docs/…

CodingStartUp www.bilibili.com/video/BV1XE…

CSS – Tricks css-tricks.com/snippets/cs… Comparison of auto-fill and auto-fit attributes css-tricks.com/auto-sizing…

Pausing. Io# 1 pausing. IO/tutorials/d… Pausing. Io# 2 pausing. IO/tutorials/g…

->> Version History

Now in V1.0 see Github(@FlightMakers)

Release of V1.0 in JJ on 2021.8.13

On August 14, 2021.8.14, Mo fought yu for two days!! This article has finally been posted QwQ!!