Example code for CSS grid layout

This article mainly introduces the CSS grid layout of the sample code, I hope to let you master more CSS skills.

Browser compatibility

You can see that the CSS grid layout is supported from Safari 10.1, Firefox, Chrome 60,edge 15.

Grid layout

Basic elements of the page:

<p class = "wrapper">
        <p class = "box box1"> One </ p>
        <p class = "box box2"> Two </ p>
        <p class = "box box3"> Three </ p>
        <p class = "box box4"> Four </ p>
        <p class = "box box5"> Five </ p>
    </ p>
style:

        .wrapper {
            border: 2px solid # f76707;
            border-radius: 5px;
            background-color: # fff4e6;
        }
        .box {
            border: 2px solid # FDC180;
        }
Create a grid container by declaring display: grid or display: inline-grid on the element:

    .wrapper {
        display: grid;
    }
The following effects:

Define rows and columns in the grid

The grid-template-columns and grid-template-rows properties define the rows and columns in the grid. These attributes define the grid's orbit. The grid track is the space between any two lines in the grid.

The following grid contains three 200-pixel wide column tracks:

    .wrapper {
        display: grid;
        grid-template-columns: 200px 200px 200px;
    }
fr unit

The new fr unit represents a fraction of the available space in the grid container. The next grid definition will create three tracks of equal width, which will grow and shrink with the available space.

    .wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
Can also be mixed with pixel units:

        .wrapper {
            display: grid;
            grid-template-columns: 500px 1fr 2fr;
        }
Use repeat () in the track list

The syntax of repeat is as follows:

repeat (number of columns / rows, the column width we want);
Large grids with multiple tracks can use the repeat () tag to repeat parts or entire track lists. As defined in the grid below:

    .wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
Can be written as:

    .wrapper {
        display: grid;
        grid-template-columns: repeat (3, 1fr);
    }
The Repeat statement can be used to repeat part of a track list. In the following example I created a grid: it starts at 20 pixels, then repeats 6 1fr tracks, and finally adds a 20 pixel track.

    .wrapper {
        display: grid;
        grid-template-columns: 20px repeat (6, 1fr) 20px;
    }
The Repeat statement can be passed in a track list, so you can use it to create a repeat track list in multitrack mode. In the next example, the grid will have a total of 10 tracks, one 1fr track followed by one 2fr track, and this pattern is repeated 5 times.

    .wrapper {
        display: grid;
        grid-template-columns: repeat (5, 1fr 2fr);
    }
grid-auto-rows and grid-auto-columns

When creating the grid example above, we used the grid-template-columns attribute to define our own column track, but let the grid create rows with the required content. These rows will be created in the implicit grid. The explicit grid contains the rows and columns you defined in the grid-template-columns and grid-template-rows properties. If you put something outside the grid definition, or if you need more grid tracks because of the amount of content, the grid will create rows and columns in the implicit grid. By default, these tracks will automatically define the size, so the size will change according to the content inside it.

You can use the grid-auto-rows and grid-auto-columns attributes in an implicit grid to define a set size track.

In the following example we use the grid-auto-rows property to ensure that the track created in the implicit grid is 200 pixels high.

    .wrapper {
        display: grid;
        grid-template-columns: repeat (3, 1fr);
        grid-auto-rows: 200px;
    }
minmax ()

When setting up an explicit grid or defining the size of automatically created rows and columns, we may want to give the grid a minimum size, but make sure they can expand to accommodate the content added to it. For example, I want my row height to never shrink below 100 pixels, but if my content extends to 300 pixels high, I want my row height to extend to this height.

The grid uses the minmax () function to solve this problem. In the next example I use minmax () as the value of grid-auto-rows. The automatically created line height will be a minimum of 100 pixels and a maximum of auto. Using auto means that the size of the line will automatically change according to the size of the content: according to the highest unit in the line, the space is expanded enough to accommodate the unit.

    .wrapper {
        display: grid;
        grid-template-columns: repeat (3, 1fr);
        grid-auto-rows: minmax (100px, auto);
    }
<p class = "wrapper">
    <p class = "box"> One </ p>
    <p class = "box"> Two
        <p> I have some more content in. </ p>
        <p> This makes me taller than 100 pixels. </ p>
    </ p>
    <p class = "box"> Three </ p>
    <p class = "box"> Four </ p>
    <p class = "box"> Five </ p>
</ p>
Place grid items across tracks

There are four vertical grid lines and three horizontal grid lines as follows:

Using the grid-column-start, grid-column-end, grid-row-start and grid-row-end properties, the first two elements are put into our three-column grid. From left to right, the first element starts at column line 1 and extends to column line 4, which is the right-most column line in our example. It extends from row line 1 to row line 3 and occupies two row tracks.

The second element starts from column line 1 and extends a track. Because this is the default behavior, I don't need to specify an end line. And it crosses two row tracks from row line 3 to row line 5. The remaining elements will place themselves in the empty space of the grid.

   .wrapper {
        display: grid;
        grid-template-columns: repeat (3, 1fr);
        grid-auto-rows: 100px;
    }
    .box1 {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3;
    }
    .box2 {
        grid-column-start: 1;
        grid-row-start: 3;
        grid-row-end: 5;
    }
Grid spacing

The horizontal grid spacing or vertical grid spacing between two grid cells can be created using the grid-column-gap and grid-row-gap properties, or directly using the two combined abbreviations grid-gap. In the following example, I will create a grid element with a horizontal spacing of 10px and a vertical spacing of 1em.

Nested grid

A grid item can also become a grid container. In the following example, I have a three-column grid element in advance, and there are two grids across the track. In this example, the first grid item contains several child items. When these items are not direct children of the grid container, they will not participate in the grid layout and appear as normal document flow.

html:

    <p class = "wrapper">
        <p class = "box box1">
            <p class = "nested"> a </ p>
            <p class = "nested"> b </ p>
            <p class = "nested"> c </ p>
        </ p>
        <p class = "box box2"> Two </ p>
        <p class = "box box3"> Three </ p>
        <p class = "box box4"> Four </ p>
        <p class = "box box5"> Five </ p>
    </ p>
css:

   .wrapper {
        display: grid;
        grid-template-columns: repeat (3, 1fr);
    }
    
    .wrapper {
        border: 2px solid # f76707;
        border-radius: 5px;
        background-color: # fff4e6;
    }
    .box1 {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3;
    }
    .box2 {
        grid-column-start: 1;
        grid-row-start: 3;
        grid-row-end: 5;
    }
    .box {
        border: 2px solid # FDC180;
        background: # FFD7A4;
        padding: 10px;
        color: # FB2E10;
    }
    .nested {
        border: 2px solid # FFF1A2;
        background: # FFFAD9;
    }
If I set box1 to display: grid I can define a track for it and it will also become a grid element, and its children will also be arranged in this new grid element.

    .box1 {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3;
display: grid;
         grid-template-columns: repeat (3, 1fr);
     }
The above is the sample code of CSS grid layout, I hope to help everyone.