Understand CSS grid layout: grid lines

Understanding CSS Grid: Grid Lines, by Rachel Andrew

This article is the second in a series that covers grid layout from novice to expert.

• Part 1: Create a grid container
• Part 2: Grid lines
• Part 3: Grid areas

The first article in this series covered how to create grid containers and the attributes you can use on container elements. Once the grid formatting context is created, you have grid lines. With grid lines, you can add properties to grid items and place items on them.

After reading this article, you will learn:

• Location attributes:grid-column-start,grid-column-end,grid-row-start,grid-row-endAnd the corresponding shorthand propertygrid-column 和 grid-row.
• How to set with line numbergrid-areaProperties.
• How to locate items based on named grid lines.
• How things behave differently on explicit and implicit grids when locating items.
• Using the span keyword, a little bit more about the benefits of subgrid.
• What to look out for when using a mix of auto-placed and placed items.

Gridline location

When locating an item in the grid, you need to set where it starts and ends. For example, I want to position an item in a 5×5 grid so that it occupies columns 2 and 3, and rows 1 through 3. I’ll use the CSS code below (note that grid lines are used here, not grid tracks).

.item {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
}
Copy the code

The above code can also be abbreviated as follows: a slash precedes a start line and a slash follows an end line.

.item {
  grid-column: 2 / 4;
  grid-row: 1 / 4;
}
Copy the code

Effect (Demo) :

Note that although the contents of.item are small, they still fill the entire location area. This is because the default values for the alignment attributes align-self and justify-self on the project are stretch.

If the project only needs to span one track, you can ignore setting the termination line, because the project defaults to one track across domains. For example, set up an item that occupies only the second column. It used to say:

.item {
  grid-column: 2 / 3;
}
Copy the code

It can actually be shortened like this:

.item {
  grid-column: 2;
}
Copy the code

.item {
  grid-area: 1 / 2 / 4 / 4;
}
Copy the code

Grid lines in an explicit grid

In a grid container, the portion of the grid area that is set with grid-template-columns or grid-template-rows is called an explicit grid. Gridlines are defined along with explicit regions.

These grid lines are numbered, starting with a value of 1, on both the inline and block dimensions. For horizontal, left-to-right typesetting languages, inline direction numbers start from the left; Block directions are numbered from the top.

The concepts of “in-line orientation” and “block orientation” need to be introduced:

We usually in the development of the website, browsing Chinese and English web page text typesetting, basically from left to right, from top to bottom. The direction in which the > text is written is called inline direction, and the direction in which the text is folded is called block direction.

Similarly, if written vertically — like in ancient Chinese books — top to bottom is the inline direction, and right to left is the block direction.

If it is in horizontal RTL (Right to Left) language environment, such as Arabic. At this point, the block direction is still numbered from the top, but the inline direction is numbered from the right.

writing-mode: vertical-rl

In addition, the last grid line in an explicit grid can be referred to by the value -1, and the second to last and third grids are -2, -3, and so on. Assuming that there is an item spanning from the first column to the last column of the grid, it can be written as follows:

.item {
  grid-column: 1 / -1;
}
Copy the code

Grid lines in an implicit grid

The grid lines of invisible grids are also numbered from 1. Suppose I create a grid with only columns explicitly specified (using the grid-template-columns attribute) and no rows explicitly specified, and only grid-auto-rows: 5em specifying the implicit row size.

In the grid layout below, I add the.placed class to an item, specifying that it spans from the first row to the last.

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div class="placed">Placed</div>
</div>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(5, 100px);
  grid-auto-rows: 5em;
}
.grid > .placed {
  background-color: orange;
  grid-row: 1 / -1; /* the end line is in the implicit grid so -1 does not resolve to it*/
}
</style>
Copy the code

Let’s look at the result (demo) :

2. It is placed at two lines, but it is placed at one This is because row tracks are now not explicitly created using grid-template-rows, resulting in row number -1 being resolved to 2 instead of 3.

There is no way to locate the last grid line in an implicit grid because you do not know how many grids there are.

Locate items using named grid lines

In addition to locating items using line numbers, we also allow you to locate items using named grid lines. A grid line can have multiple names, enclosed in square brackets [], defined between tracks sizes.

.grid {
  display: grid;
  grid-template-columns: [full-start] 1fr [main-start] 2fr 2fr [main-end full-end];
}
Copy the code

With named gridlines, you can use them to replace the default line number to locate items.

.item {
  grid-column: main-start / main-end;
}
Copy the code

Effect (Demo) :

If a grid line defines multiple names, you can use any of them. So many names all end up referring to the same grid line.

How to handle multiple grid lines with the same name?

This is an interesting scenario where multiple grid lines share the same name. This happens where the repeat() function is used. In the following example, I define an eight-column grid, which is obtained by repeating (4, [sm] 1fr [lg] 2fr) four times. The grid line to the left of the smaller track size was named SM, and the grid line to the left of the larger track size was named LG.

In this case, if you want to specify a specific grid line, use the index. For example, if I wanted to extend a project from the second SM grid line to the third LG grid line, I would use grid-column: sm 2 / LG 3. In addition, if no index is assigned to a grid line, the first grid line with this name is resolved by default.

<div class="grid">
  <div class="item">Item</div>
</div>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(4, [sm] 1fr [lg] 2fr);
  grid-template-rows: repeat(5, 50px);
}
.item {
  grid-column: sm 2 / lg 3;
  grid-row: 1 / 4;
}
</style>
Copy the code

Effect (Demo) :

Use keywordsspan

In some cases, only one item is required to span a certain number of tracks, but the exact grid location is not known. For example, when an auto-placement algorithm is used to locate items, they are known to span multiple tracks instead of the default of one. At this point, the keyword span is used.

Item1 sets grid-column: auto/span 3:

<div class="grid">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
</div>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, 50px);
}
.item1 {
  grid-column: auto / span 3;
}

.item2 {
  grid-column: auto / span 2;
  grid-row: auto / span 2;
}
</style>
Copy the code

Take a look at the effect (demo) :

This technique will become very useful in the future when grid-template-columns and grid-template-Rows properties begin to fully support subgrid values. For example, in a card layout where each card contains a title and content area, and we want the contents of these cards to be aligned with each other, we can control the card to inherit (two) rows from the parent grid by setting grid-template-Rows to subgrid for the card. This will enable automatic alignment of the card contents.

<div class="grid">
  <article class="card">
    <h2>This is the heading</h2>
    <p>This is the body of the card.</p>
  </article>
  <article class="card">
    <h2>This is the heading and some headings are bigger</h2>
    <p>This is the body of the card.</p>
  </article>
	<! -... -->
</div>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
 
 /* * 1. '. Card 'is both a grid project (belonging to'.grid ') and a grid container. * 2. '. Card 'occupies two rows of tracks as a grid item, and its behavior on the rows is passed to its subitems as containers. * / .card { grid-row: auto / span 2; / * 2 * /
  display: grid; / * 1 * /
  grid-template-rows: subgrid; / * 2 * /
}
</style>
Copy the code

Take a look at the effect (demo. Subgrid is not currently supported in Chrome.

Location of cascading items based on grid lines

The grid system automatically locates an item in an empty cell on the grid, rather than having the item located in the same cell. However, different items can be placed in the same grid cell based on the grid row number. In this example, I set up an image spanning two lines of track, and a title text with a translucent background in the second line.

<div class="grid">
  <figure>
    <img src="Https://images.unsplash.com/photo-1576451930877-c838b861e9b6?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhc HBfaWQiOjE0NTg5fQ" alt="lights">
    <figcaption>This is the caption</figcaption>
  </figure>
  <! -... -->
</div>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
  
figure {
  display: grid;
  grid-template-rows: 300px min-content;
}
  
figure img {  
  object-fit: cover;
  width: 100%;
  height: 100%;
  grid-row: 1 / 3;
  grid-column: 1;
}
  
figcaption {
  grid-row: 2;
  grid-column: 1;
  background-color: rgba(0, 0, 5);color: #fff;
  padding: 10px;
}
</style>
Copy the code

Effect (Demo) :

The items will be listed in the order they appear in the HTML. In the example above, the title comes after the image and therefore appears above it. If the title is in front, it will be behind the picture and we can’t see it. In addition, if the caption must precede the image, you can control the cascade order by using the Z-Index attribute to make the image appear.

Hybrid use of gridline positioning and automatic positioning

Be careful if you use a mix of gridline positioning and auto positioning. When the project is positioned according to the automatic positioning algorithm, it will position itself successively to the next available blank space on the grid.

<div class="grid">
  <figure>.</figure>
  <figure>.</figure>
  <figure>.</figure>
	<! -... -->
</div>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
  
figure {
    margin: 0;
    display: grid;
    grid-template-rows: 200px min-content;
}

figure:nth-child(odd) {
  grid-column: auto / span 2;
}

figure:nth-child(2) {
  grid-column: auto / span 3;
}
</style>
Copy the code

Effect (Demo) :

The default positioning behavior of the grid is that if there is not enough space currently left for the project, it will be displayed in a new line, which will cause the previous line to be blank. You can control this behavior by setting grid-auto-flow to dense (a dense arrangement of items as closely as possible). In this case, if the current amount of white space is large enough for a subsequent item, the subsequent item will automatically be crowded to display, causing the display order to be inconsistent with the source order. We modified the above example slightly and added a Grid-Auto-flow: dense setting. It turns out that item 3 is displayed before item 2.

.grid {
  / *... * /
  grid-auto-flow: dense; /* add this sentence */
}
Copy the code

Effect (Demo) :

Note that this behavior can cause problems when users browse documents using the Tab key, because the view order is different from the source order. The automatic positioning algorithm looks for the first available gap to arrange the grid items. For example: the layout of the first few grid items avoids the top area, leaving a blank space, and the automatic positioning algorithm arranges subsequent items of appropriate size into these tracks.

Here’s another example (the last one in this article) : We left the space on the first row empty based on line number positioning (items 1 and 2), and you’ll see later items move up to fill the space.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

figure:nth-child(odd) {
  grid-column: auto / span 2;
}

figure:nth-child(1) {
  grid-row: 2;
  grid-column: 1;
}

figure:nth-child(2) {
  grid-row: 2;
  grid-column: 2 / -1;
}
Copy the code

Effect (Demo) :

See yet? The first and second items are positioned on the second line, leaving the first line empty, while the third and fourth items are then pushed to the first line by the automatic positioning algorithm.

Note that one other thing I did at the end of the GIF was set grid-Auto-flow: Dense on the grid container, which moved the sixth project up. This is to distinguish between automatic positioning and intensive positioning:

• Automatic positioning, while occupying white space, obeys the order of items – the order of items to the spatial area is the same as the order that appears in the source code.
• Dense positioning is no matter the order – as long as the empty space is big enough for me, I will go there.

Automatic location algorithm is worth our understanding. This can be helpful in understanding how the layout looks in certain scenarios — for example, if a new item is added to the grid without a location area, it may not appear at the back of the grid as we expect, but in some “strange” position near the front.