Make writing a habit together! This is my first day to participate in the “Gold Digging Day New Plan · April More text challenge”, click to see the details of the activity.

Prototype and Thinking

As shown, implement a simple city leaderboard

A few points to note

  1. Fix two columns with a fixed gap between them. But not fixed how many rows, according to the height of the container automatically filled how many rows;
  2. Data items fill the first column, then the second column;
  3. The layout requires a certain degree of adaptation, the data items can be fixed in height, but not in width (because the width of the entire container is adaptive through VW units);
  4. Data items should be vertically centered;

Flex or Grid

The title of the article suggests that the Grid layout will eventually be used, but you might wonder: “Eh? What you can do with Grid, I can do with Flex layout. Really not, the ancient table table can also be a cell, separated out the final effect ah?”

But to be fair, no technology is a silver bullet, and jQuery is not invincible. It just applies to the situation.

I personally feel that single-line linear layouts work well with Flex layouts, such as text alignment; But the regional layout of the plane, the Grid is more suitable, such as nine Grid ah and so on. Let’s try to implement that.

The final case

jsrun.net/CE9Kp/edit

Grid attribute Interpretation

grid-template-columnsSets the column width of the grid

There are five value modes

  1. Fixed column width, fixed column number
/* Set two columns, each 20 pixels wide */
grid-template-columns: 20px 20px; 
/* With the repeat() function, repeat 2 columns, each 20 pixels wide */
grid-template-columns: repeat(2.20px);
/* You can also set percentages as column widths */
grid-template-columns: 33% 33% 33%;
Copy the code
  1. Fixed column width, not fixed column number
/* Column width 20 pixels, but not sure how many columns, according to the container automatically paved */
grid-template-columns: repeat(auto-fill, 20px);
Copy the code
  1. Not fixed column width, fixed column number
/* Set two columns, one for each column (equivalent to 50% 50%) */
grid-template-columns: 1fr 1Fr /* Universal can be usedrepeat() function */ grid-template-columns:repeat(2.1fr)
Copy the code
  1. Do not fix the column width or the number of columns
/* Minmax function: sets the minimum and maximum width of the column */
grid-template-columns: 1fr 1fr minmax(300px.2fr);
/* auto keyword: the width of this column is adaptive, subtract the width of other columns, the remaining width is the width of this column */
grid-template-columns: 20px auto 20px;
Copy the code
  1. [columnName]Specifying column names
/* Set two columns, the first column name is c1, the second column name is c2 */
grid-template-columns: [c1] 20px [c2] 20px;
Copy the code

Similarly, set the grid-template-rows property for row height to the same range

grid-auto-columnSet up an implicit grid

Implicit and explicit grids: The explicit Grid is placed inside the Grid container, and the implicit Grid, the extra Grid, is placed outside the Grid container. The assignment rules are exactly the same as grid-template-columns.

grid-auto-flowControl layout algorithm

By default, Grid elements are placed in grid-auto-flwo: row order.

.wrapper {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-auto-flow: row;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
Copy the code

The CSS layout above looks like this

Notice that there is a space after Five, and Six is replaced by a new line. This is easy to understand, because Six is too fat to fit, and Seven thinks she is in the same line as Six, so she leaves a space empty. Can we just let it hate on itself? Yes, set grid-Auto-Flwo: Row dense to become a compact layout, the effect is as follows:

Going back to our example, if you wanted to do the opposite and fill each column first and then row, you could change to grid-auto-flwo: column to see if One and Two go first and then row

grid-gapSet the interval

Grid-gap is a shorthand property for grid-column-gap and grid-row-gap. As the name suggests, grid-gap sets the space between columns and rows. This one is relatively simple and won’t go into detail, but Flex layouts do not have the gap property and cannot set gaps between elements because Flex layouts are linear in nature. With these attributes, and Grid layout features, and a comparison of Flex, I think you should have an answer to which is more flexible. Of course, Grid layout compatibility has always been controversial, but that doesn’t stop us from learning about it.

reference

  • Ruan Yifeng – CSS Grid layout tutorial
  • Gopal – The most powerful CSS Grid layout