IT Course CSS Basics 031_Grid Layout

Grid Layout

A grid is a layout mode consisting of a series of horizontal and vertical lines. With a grid, we can arrange design elements, helping us design pages with elements that have fixed positions and widths, making our website pages more uniform.

A grid typically has many columns and rows, as well as gaps between rows and columns, which are generally called gutters.

Example effect

Basic Concepts

Grid layout consists of the following basic concepts:

Grid container: Grid layout consists of grid containers and grid items. A grid container is a container that places grid items into the grid. A grid container can be any element, but usually a div element is used.
Grid item: A grid item is an element placed in a grid container. A grid item can be any element, but usually a div element is used.
Grid line: Grid lines are lines that divide the grid container into rows and columns. Grid lines can be horizontal or vertical.
Grid column: Grid columns are vertical lines in the grid container.
Grid row: Grid rows are horizontal lines in the grid container.

Common Properties

Grid Container Properties

Grid containers have the following properties to control grid layout:

display: Sets the display mode of the grid container. The grid container must be set to display: grid or display: inline-grid to use grid layout.
grid-template-columns: Sets the number of columns and column width of the grid container (using fr, px, em and other units).
grid-template-rows: Sets the number of rows and row height of the grid container (using fr, px, em and other units).
grid-template: Sets both grid-template-columns and grid-template-rows.
grid-auto-columns: Sets the column width of the grid container.
grid-auto-rows: Sets the row height of the grid container.

Grid Item Properties

Grid items have the following properties to control the layout of grid items in the grid:

grid-column: Sets the column where the grid item is located.
grid-row: Sets the row where the grid item is located.
grid-column-start: Sets the starting position of the grid item in the column.
grid-column-end: Sets the ending position of the grid item in the column.
grid-row-start: Sets the starting position of the grid item in the row.
grid-row-end: Sets the ending position of the grid item in the row.
grid-area: Sets the area where the grid item is located.
grid-gap: Sets the spacing between grid lines.

Grid Layout

Define fixed and adaptive column widths and row heights

Example:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 100px 200px auto;
4
    /* First column 100px, second column 200px, remaining space allocated to adaptive column */
5
    grid-template-rows: 100px 200px auto;
6
    /* First row 100px, second row 200px, remaining space allocated to adaptive row */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Grid Demo</div>
3
        <div class="item">Grid Demo</div>
4
        <div class="item">Grid Demo</div>
5
        <div class="item">Grid Demo</div>
6
        <div class="item">Grid Demo</div>
7
        <div class="item">Grid Demo</div>
8
        <div class="item">Grid Demo</div>
9
        <div class="item">Grid Demo</div>
10
        <div class="item">Grid Demo</div>
11
    </div>

Effect:

Example effect Using percentages to define column width and row height

Example:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 30% 2fr 1fr;
4
    /* First column takes 30%, second column takes two parts of remaining space, third column takes one part of remaining space */
5
    grid-template-rows: 30% 2fr 1fr;
6
    /* First row takes 30%, second row takes two parts of remaining space, third row takes one part of remaining space */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Grid Demo</div>
3
        <div class="item">Grid Demo</div>
4
        <div class="item">Grid Demo</div>
5
        <div class="item">Grid Demo</div>
6
        <div class="item">Grid Demo</div>
7
        <div class="item">Grid Demo</div>
8
        <div class="item">Grid Demo</div>
9
        <div class="item">Grid Demo</div>
10
        <div class="item">Grid Demo</div>
11
    </div>

Effect:

Example effect Equal division (evenly distributed) column width and row height

Example:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    /* Three equal columns, each column takes one part of remaining space */
5
    grid-template-rows: repeat(3, 1fr);
6
    /* Three equal rows, each row takes one part of remaining space */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Grid Demo</div>
3
        <div class="item">Grid Demo</div>
4
        <div class="item">Grid Demo</div>
5
        <div class="item">Grid Demo</div>
6
        <div class="item">Grid Demo</div>
7
        <div class="item">Grid Demo</div>
8
        <div class="item">Grid Demo</div>
9
        <div class="item">Grid Demo</div>
10
        <div class="item">Grid Demo</div>
11
    </div>

Effect:

Example effect Using minmax to define minimum and maximum width/height for columns and rows

Example:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: minmax(100px, 1fr) minmax(200px, 2fr);
4
    /* First column minimum width 100px, takes one part of remaining space; second column minimum width 200px, takes two parts of remaining space */
5
    grid-template-rows: minmax(100px, 1fr) minmax(200px, 2fr);
6
    /* First row minimum height 100px, takes one part of remaining space; second row minimum height 200px, takes two parts of remaining space */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Grid Demo</div>
3
        <div class="item">Grid Demo</div>
4
        <div class="item">Grid Demo</div>
5
        <div class="item">Grid Demo</div>
6
    </div>

Effect:

Example effect

Grid Gap

Grid gap is controlled by two properties: grid-row-gap and grid-column-gap. Additionally, CSS Grid Level 2 introduced the gap property, which can control both grid-row-gap and grid-column-gap at the same time.

Example:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 30% 30% 30%;
4
    grid-template-rows: 200px 200px;
5
    grid-row-gap: 50px; /* Row gap is 50px */
6
    grid-column-gap: 30px; /* Column gap is 30px */
7
    /* gap: 50px 30px; Row gap is 50px, column gap is 30px */
8
}
9
.item{
10
    margin: 10px;
11
    background-color: rgb(100, 150, 200);
12
}

1
    <div class="grid-example">
2
        <div class="item">Grid Demo</div>
3
        <div class="item">Grid Demo</div>
4
        <div class="item">Grid Demo</div>
5
        <div class="item">Grid Demo</div>
6
        <div class="item">Grid Demo</div>
7
        <div class="item">Grid Demo</div>
8
    </div>

Effect:

Example effect

Grid Positioning

Grid positioning typically refers to using grid-column, grid-row, and grid-area properties to position items in a grid layout. These properties are used to specify which columns and rows an item occupies in the grid, or to directly specify the area where an item is located.

grid-column is a property used to set the columns a grid item spans. It is a shorthand for grid-column-start and grid-column-end. With grid-column, you can more conveniently define the position and number of columns a grid item spans in the horizontal direction.
grid-row is a property used to set the rows a grid item spans. It is a shorthand for grid-row-start and grid-row-end. With grid-row, you can more conveniently define the position and number of rows a grid item spans in the vertical direction.
grid-area property is a shorthand property for setting grid-row-start, grid-column-start, grid-row-end, and grid-column-end at the same time. With grid-area, you can more intuitively define the position and size of a grid item in the grid layout.

Example:

1
.example {
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    /* Define 3 columns, each column takes 1 part of space */
5
    grid-template-rows: repeat(2, 150px);
6
    /* Define 2 rows, each row height is 150px */
7
    gap: 10px;
8
    padding: 20px;
9
}
10
.item {
11
    background-color: #f2f2f2;
12
    padding: 20px;
13
    border: 1px solid #ddd;
14
    text-align: center;
15
}
16
/* Position using grid-column and grid-row */
17
.item1 {
18
    grid-column: 1 / 3; /* From column 1 to column 3 (columns 1+2) */
19
    grid-row: 1 / 2;    /* From row 1 to row 2 (row 1) */
20
}
21
/* Position using grid-area */
22
.item2 {
23
    grid-area: 2 / 2 / 3 / 4; /* From row 2 column 2 to row 3 column 4 (row 2)(columns 2+3) */
24
}

1
<div class="example">
2
    <div class="item item1">Item 1</div>
3
    <div class="item item2">Item 2</div>
4
    <div class="item">Item 3</div>
5
    <div class="item">Item 4</div>
6
    <div class="item">Item 5</div>
7
    <div class="item">Item 6</div>
8
</div>

Effect:

Example effect

Example:

1
body {
2
    margin: 0;
3
    padding: 0;
4
}
5

6
.container {
7
    display: grid;
8
    grid-template-columns: 1fr 2fr;
9
    /* Define two columns, first column takes one part, second column takes two parts */
10
    grid-template-rows: auto;
11
    /* Define row height, first and third row heights determined by content, second row takes remaining space */
12
    grid-template-areas:
13
    "header header"
14
    "sidebar main"
15
    "footer footer";
16
    /* Define area layout, each area represented by a string, spaces separate cells, newlines indicate new rows */
17
    min-height: 100vh;
18
    /* Set minimum height to ensure footer is visible when content height is less than viewport */
19
}
20

21
.header {
22
    grid-area: header;
23
    /* Place .header in the area named "header" */
24
    background-color: #333;
25
    color: #fff;
26
    padding: 10px;
27
}
28

29
.sidebar {
30
    grid-area: sidebar;
31
    /* Place .sidebar in the area named "sidebar" */
32
    background-color: #f2f2f2;
33
    padding: 10px;
34
}
35

36
.main {
37
    grid-area: main;
38
    /* Place .main in the area named "main" */
39
    padding: 10px;
40
}
41

42
.footer {
43
    grid-area: footer;
44
    /* Place .footer in the area named "footer" */
45
    background-color: #333;
46
    color: #fff;
47
    padding: 10px;
48
}

1
    <div class="container">
2
        <div class="header">Header</div>
3
        <div class="sidebar">Sidebar</div>
4
        <div class="main">
5
          <h1>Main Content</h1>
6
          <p>This is the main content area.</p>
7
        </div>
8
        <div class="footer">Footer</div>
9
    </div>

Effect:

Example effect

Grid Layout

Basic Concepts

Common Properties

Grid Layout

Grid Gap

Grid Positioning

Comments