Shulou(Shulou.com)06/01 Report--

This article focuses on "how to create a grid container in CSS". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn how to create a grid container in CSS.

Create a container

Similar to an elastic layout, you need to create a grid container before using a grid layout. Grid containers can be created using display: grid, and grid layout elements created in this way are block-level elements that automatically generate a grid formatting context (grid formatting context), and all its immediate child elements automatically become grid projects.

But you won't see the effect immediately, not because the layout doesn't work. It's because when you don't set columns for the grid, the default is one column layout, in which grid items are stacked one by one and arranged from top to bottom, acting like block elements.

"like block elements" may confuse you a little bit, in order to prove that grid projects behave like block elements regardless of element type. Let me give you an example:

Item one

Item Two

A string of text with a span element in the middle.

This string of text follows the grid.

.grid {display: grid;}

Grid is not always a block element div, here the A string of text with a span element in the middle. It suddenly looks like a line.

Let's take a look at the actual effect:

It is found that the naked texts on both sides are independent and stand on one line. Looking at it using Firefox Grid Inspector, there are five lines.

It can be seen that regardless of the element type (even the exposed text node), the grid project will show the characteristics of block elements under the action of grid formatting context.

Of course, you can also use display: inline-grid to create a grid. So what's the difference between grid and inline-grid? This is similar to the relationship between inline and inline-block. The inline-grid grid behaves like an inline element, which can be arranged in a row with other inline elements, while inside it is a block element, which can set wide and high attributes.

Again in the above example, we will modify CSS slightly:

.grid {display: inline-grid;}

It can be arranged on one line with the following text.

Rows and columns

To make the grid look like a grid, we need to set up rows and columns with grid-template-column and grid-template-rows. The value received by these two properties is called track-list. Look at what the specification says:

These two properties receive track list separated by spaces, consisting of line names and track sizing functions. Grid-template-columns specifies the track list,grid-template-rows of the grid column and the track list of the specified grid row.

Some valid track-list values are shown below:

As you can see, there are many ways to create a track list. Next, let's see how these values work. Also, there are some tips on why you use it this way.

Use unit of length

You can create tracks in length or percentage units. If all the track sizes add up to less than the available size of the current container, the grid items are arranged on the left side of the container by default (under language typesetting rules such as English), and the extra space is left on the right. This is because the default values for the align-content and justify-content properties are start.

Of course, you can also use keywords like min-content, max-content, and fit-content () functions.

Min-content is the minimum size when the content of the element does not overflow. When used on a column, it is equal to the size of the longest word in the column or the largest fixed size (fixed-size) element.

Max-content is the maximum size of the content of an element without wrapping at all. When used on a column, it is equal to the unfolding size of the text in the column without wrapping at all. Pay attention to overflow problems that may occur when using it.

Fit-content () cannot be used until a value is passed in. This value represents the maximum size to which the orbit can grow, and the orbit stops growing when it does not break and freely extends to this critical value. So, the result is that the track length is always less than the incoming value (provided that the incoming value is between min-content and max-content).

For example:

Item One

Item Two Item Two

Item Three Item Three Item Three

Item Four

.grid {

Display: grid

Grid-template-columns: min-content max-content fit-content (10em)

}

The third column does not grow when it reaches the size of 10em.

If all tracks take up more space than the container itself, an overflow will occur. Especially when setting the track size with percentage units, you must pay attention to that the total value of the percentage does not add up to more than 100%, otherwise it will overflow.

Fr unit

There is another way you can use in Grid to help you avoid using percentage values when calculating manually-fr units. It is not a unit of length, so it cannot be used in calc (). It is used to represent the available space in the current grid container.

Take the track list of 1fr 1fr 1fr as an example: the available space is equally divided into three equal parts, and each orbit obtains one of them. For 2fr 1fr 1fr, the second and third columns both get free space of 1 prime 4, and the first column gets 1 prime 2 free space.

Item One

Item Two Item Two

Item Three Item Three Item Three

Item Four

.grid {

Display: grid

Grid-template-columns: 2fr 1fr 1fr

}

It is important to note here that the available space (avaible space) is allocated to the fr unit, not the entire container space. If the grid track contains fixed-size (fixed-size) elements or unbroken words, these elements will be laid out first, and then the remaining space (that is, free space) will be left for fr to allocate.

To give another example-I removed the space between the words ItemThree in the third grid project, which will result in a very long word. At this time, the layout will have to be considered first.

The 1fr of the third project no longer works, and the width is completely supported by the content. After that, the first and second projects allocate the remaining free space, with the first project accounting for 2max 3 and the second project accounting for 1amp 3.

You can also use fr with other units of length, which is useful in some scenarios. For example, we have a three-column component, two columns on both sides are fixed in size, and the middle column automatically fills the remaining space.

Fixed

Flexible

Fixed

.grid {

Display: grid

Grid-template-columns: 100px 1fr 100px

}

Or you can also set the size of one track to fit-content (300px), and the others to 1fr. This makes the first orbit no larger than 300px (only takes up the required space), while the orbit using fr automatically expands the remaining space.

For example, if we put a max-width: 100% image on the first track, then this picture can only be as wide as 300px. In this way, you can create a very flexible component layout.

.grid {

Grid-template-columns: fit-content (300px) 1fr

}

Repeat () function

The repeat () function can help you avoid repeating the same value. For example, the following two lines of code have the same effect:

Grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr

Grid-template-columns: repeat (12, 1fr)

The first parameter of repeat () represents the number of repeats, and the second parameter is track list. Track list can use multiple values.

You can also use the repeat () function as part of track list. For example, the following code creates a 1fr track, three 200px tracks, and a 1fr track.

Grid-template-columns: 1fr repeat (3200px) 1fr

In addition to using a fixed number of repeats, you can also use the keywords auto-fill and auto-fit in repeat (). Using one of the fixed values written by one of the elements, the grid container will have as many layout grid items in a row as possible (at least keeping each grid project 200px wide).

Code:

Item One

Item Two

Item Three

Item Four

.grid {

Display: grid

Grid-template-columns: repeat (auto-fill, 200px)

Width: 500px

}

The grid container here uses a fixed length (500px), and both tracks are 200px, so the container cannot be completely divided, so there is some remaining space on the right.

Of course, we can use the function minmax (), where the first argument represents the minimum acceptable value and the second parameter represents the maximum value. We set the minimum size to 200px and the maximum size to 1fr, so that if there is any space left, it will be filled up.

Code:

.grid {

Display: grid

Grid-template-columns: repeat (auto-fill, minmax (200px, 1fr))

Width: 500px

}

Effect (demo):

I mentioned two keywords earlier: auto-fill and auto-fit. If your content exceeds one line, you will not see the difference using these two keywords. The difference is when there is only one line of content.

When using auto-fill, new tracks are generated even though there is no typesetting content in the grid container.

Item One

.grid {

Display: grid

Grid-template-columns: repeat (auto-fill, minmax (200px, 1fr))

Width: 500px

}

If you use auto-fit instead, the empty orbit will be collapsed:

.grid {

Display: grid

Grid-template-columns: repeat (auto-fit, minmax (200px, 1fr))

Width: 500px

}

Effect:

Using Firefox Grid Inspector, you can see that the number of the last column line is still 3 (in the direction indicated by the arrow), but the space shrinks to 0, which coincides with the second column line. There are three lines, which shows that we can put two tracks, but because there is no second one, there is no space and is squeezed out by the first one.

Named gridlines

In the final example, let's look at the use of named gridlines. When using a grid layout, each grid line has a number by default, and we can also name the grid line. The name of the grid is defined in square brackets. Each grid line can have multiple names, separated by spaces. Here's an example: the following track list, with two names for each grid line.

Grid-template-columns: [main-start sidebar-start] 1fr [sidebar-end content-start] 4fr [content-end main-end]

You can give grid lines any name except span, because span is a reserved word and can be used when arranging grid projects.

Show and implicit grid

Use the grid-template-columns and grid-template-rows attributes to set that grid area, called the explicit grid (explicit grid). Because the track size in this grid area is explicitly set.

If the grid has a lot of content, beyond the area set by deleting the two properties, then this area is called the implicit grid (implicit grid). Grid projects arranged in this area are rendered according to their own size by default. How to control these out-of-range rows and columns-- use the grid-auto-rows or grid-auto-columns properties. For example, you want all implicit grid columns to be at least 200px wide, and if there is more content, it will be displayed naturally according to the actual content, then you can use the following declaration:

Grid-auto-rows: minmax (200px, auto)

If you want odd lines to remain naturally high and even lines to keep 100px or other sizes, you can try multi-valued syntax.

Grid-auto-rows: auto 100px

At this point, I believe you have a deeper understanding of "how to create a grid container in CSS". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.