CSS properties related to grid layout
This article explains CSS properties related to grid layout.
You can learn how to describe grid and inline grid.
YouTube Video
HTML for Preview
css-grid.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-grid.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>grid</h3>
23 <section style="width: 100%; height: 350px;">
24 <header><h4>display: grid; grid-template-columns: 100px 200px auto; grid-template-rows: 100px auto 50px;</h4></header>
25 <section class="sample-view">
26 <div class="grid-box">
27 <div class="grid-item">Item 1</div>
28 <div class="grid-item">Item 2</div>
29 <div class="grid-item">Item 3</div>
30 <div class="grid-item">Item 4</div>
31 <div class="grid-item">Item 5</div>
32 <div class="grid-item">Item 6</div>
33 </div>
34 </section>
35 </section>
36 <section style="width: 100%; height: 550px;">
37 <header><h4>display: grid; grid-template-columns: 120px 1fr 80px; grid-template-rows: 100px 1fr 100px;</h4></header>
38 <section class="sample-view">
39 <div class="grid-container" style="color: #666;">
40 <header class="grid-header">Header</header>
41 <aside class="grid-sidebar">Sidebar</aside>
42 <article class="grid-content">
43 <p>Content</p>
44 </article>
45 <aside class="grid-ads">Ads</aside>
46 <footer class="grid-footer">Footer</footer>
47 </div>
48 </section>
49 </section>
50 </article>
51 <article>
52 <h3>gap</h3>
53 <section style="height: 300px;">
54 <header><h4>display: grid; gap: 30px 10px;</h4></header>
55 <section class="sample-view">
56 <div class="gap-grid-container">
57 <div>Item 1</div>
58 <div>Item 2</div>
59 <div>Item 3</div>
60 <div>Item 4</div>
61 <div>Item 5</div>
62 <div>Item 6</div>
63 </div>
64 </section>
65 </section>
66 <section>
67 <header><h4>display: flex; gap: 50px;</h4></header>
68 <section class="sample-view">
69 <div class="gap-flex-container">
70 <div>Item 1</div>
71 <div>Item 2</div>
72 <div>Item 3</div>
73 </div>
74 </section>
75 </section>
76 </article>
77 <article>
78 <h3>grid-template-areas</h3>
79 <section style="height: 350px;">
80 <header><h4>grid-template-areas: "header header" "sidebar content" "footer footer";</h4></header>
81 <section class="sample-view">
82 <div class="grid-template-areas-container">
83 <div class="grid-template-areas-header">Header</div>
84 <div class="grid-template-areas-sidebar">Sidebar</div>
85 <div class="grid-template-areas-content">Content</div>
86 <div class="grid-template-areas-footer">Footer</div>
87 </div>
88 </section>
89 </section>
90 </article>
91 <article>
92 <h3>inline-grid</h3>
93 <section>
94 <header><h4>display: inline-grid</h4></header>
95 <section class="sample-view">
96 Here is an inline grid:
97 <span class="inline-grid-container">
98 <div class="inline-grid-item">1</div>
99 <div class="inline-grid-item">2</div>
100 <div class="inline-grid-item">3</div>
101 <div class="inline-grid-item">4</div>
102 </span>
103 This is contained within a paragraph.
104 </section>
105 </section>
106 </article>
107 </main>
108</body>
109</html>Grid Layout
grid
1.grid-box {
2 display: grid;
3 grid-template-columns: 100px 200px auto;
4 grid-template-rows: 100px auto 50px;
5 gap: 10px;
6 background-color: lightblue;
7 border: none;
8 height: 200px;
9}
10
11.grid-item {
12 background-color: lightskyblue;
13 width: 100%;
14 padding: 0;
15 text-align: center;
16 border: 2px solid black;
17}A grid is a layout system for aligning elements in two-dimensional rows and columns. Using a grid, you can easily and flexibly construct complex layouts that were difficult with traditional float or position methods. While flexbox excels at one-dimensional layouts, the grid is suitable for two-dimensional layouts.
- The
grid-boxclass applies a grid layout by specifyinggridin thedisplayproperty. This element is called a grid container. - The
grid-template-columnsproperty specifies the width of grid columns. In this example, the first column is 100px, the second column is 200px, and the third column takes up the remaining space (auto). - The
grid-template-rowsproperty specifies the height of grid rows. The first row is 100px, the second row is automatic (auto), and the third row is 50px high. - The
gapproperty sets the spacing between grid items. Adding 10px of space between columns and rows.
Basic Terminology
- A grid container is an element with the
displayproperty set togrid, and its children become grid items. - Grid items are the child elements placed directly under a grid container.
Main grid properties
grid-template-columns & grid-template-rows
1.container {
2 grid-template-columns: 1fr 2fr 1fr;
3}- The
grid-template-columnsandgrid-template-rowsproperties define the size of each column and row. - Units like
pxand%, as well asfr(fraction) to specify a proportion of the remaining space, can be used.- In this example, there are three columns, and the second column is twice the width of the others.
grid-column & grid-row
1.container {
2 display: grid;
3 grid-template-columns: repeat(4, 1fr); /* 4 columns */
4 grid-template-rows: repeat(3, 100px); /* 3 rows */
5}
6.item {
7 grid-column: 2 / 4;
8 grid-row: 1 / 3;
9}
10/* Grid line number (3 rows & 4 columns)
11 1 2 3 4 5
121 +---+---+---+---+
13 | | o | o | |
142 +---+---+---+---+
15 | | o | o | |
163 +---+---+---+---+
17 | | | | |
184 +---+---+---+---+
19*/-
grid-columnandgrid-roware properties used to specify the position of grid items. Instead of cell numbers, the numbering is based on grid lines.- In this example, the item is placed from the 2nd to the 4th vertical grid line and from the 1st to the 3rd horizontal grid line. In other words, it occupies the cells in columns 2 and 3, and rows 1 and 2.
-
Grid lines refer to the lines that divide rows and columns within a grid container. Grid lines are automatically numbered starting from 1 and are used as boundaries for rows and columns.
- For example, a grid with 4 columns has 5 vertical grid lines numbered from 1 to 5, and each cell is placed in the area between these lines.
grid-auto-rows & grid-auto-columns
1.container {
2 display: grid;
3 grid-template-rows: 100px 200px; /* Explicitly define 2 rows */
4 grid-template-columns: 1fr 2fr; /* Explicitly define 2 columns */
5 grid-auto-rows: 150px; /* Automatically added rows will be 150px */
6 grid-auto-columns: 100px; /* Automatically added columns will be 100px */
7}
8
9.item {
10 grid-column: 3; /* Positioned in the 3rd column (auto-generated) */
11 grid-row: 3; /* Positioned in the 3rd row (auto-generated) */
12}grid-auto-rowsandgrid-auto-columnsare properties that control the size of rows and columns that are automatically generated when grid layout lines or columns are not explicitly defined.- In this example, 2 rows and 2 columns are explicitly defined, but if more elements are added, new rows or columns will be auto-generated according to
grid-auto-rowsandgrid-auto-columns.
- In this example, 2 rows and 2 columns are explicitly defined, but if more elements are added, new rows or columns will be auto-generated according to
justify-items & align-items
1.container {
2 justify-items: center; /* Center items horizontally */
3 align-items: center; /* Center items vertically */
4}- Align grid items horizontally (
justify-items) and vertically (align-items).
grid-area
1/* grid-area syntax
2grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
3*/
4.item {
5 grid-area: 1 / 2 / 3 / 4;
6}grid-areais a property that allows you to specify the row and column ranges at once to position a grid item. You specify the position using the grid line numbers, not the cell numbers.- In this example, the item is placed from the 1st to the 3rd horizontal grid line, and from the 2nd to the 4th vertical grid line. In other words, it occupies the range of cells in rows 1 and 2, and columns 2 and 3.
gap
1.container {
2 gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}gapadds space between columns and rows. You can also specify the spacing between columns and rows individually usingcolumn-gapandrow-gap.
grid-auto-flow
1.container {
2 grid-auto-flow: column; /* Add items in the column direction */
3}grid-auto-flowis a property that sets the direction in which items are placed, either by row or by column.
Example of complex layouts
1.grid-container {
2 display: grid;
3 grid-template-columns: 120px 1fr 80px;
4 grid-template-rows: 50px 1fr 50px;
5 gap: 10px;
6 background-color: transparent;
7 border: none;
8 height: 400px;
9}
10.grid-header {
11 grid-column: 1 / 4;
12 background-color: lightblue;
13}
14.grid-sidebar {
15 grid-column: 1 / 2;
16 grid-row: 2 / 3;
17 height: 100%;
18 background-color: lightslategray;
19 color: white;
20}
21.grid-content {
22 grid-column: 2 / 3;
23 grid-row: 2 / 3;
24 background-color: lightskyblue;
25}
26.grid-content p {
27 margin: 0;
28 padding: 0;
29 height: 260px;
30}
31.grid-ads {
32 grid-column: 3 / 4;
33 grid-row: 2 / 3;
34 height: 100%;
35 background-color: lightsteelblue;
36}
37.grid-footer {
38 grid-column: 1 / 4;
39 background-color: lightgray;
40}In this way, grid allows you to create an entire webpage layout with simple code.
- In this example, there are three columns (sidebar, main content, and advertisement) and three rows (header, content, and footer).
- The header and footer occupy the full width of the page, with the content in the center, and the sidebar and advertisement on both sides.
Advantages of Grids
The advantages of grid include the following points:.
- Easy two-dimensional layout: Managing the layout in both rows and columns allows even complex layouts to be achieved with less code.
- Compatible with responsive design: The grid system makes it easy to create responsive designs that adapt to different screen sizes.
gap property
1.gap-grid-container {
2 display: grid;
3 grid-template-columns: repeat(3, 1fr);
4 gap: 30px 10px;
5 background-color: transparent;
6 border: none;
7 height: 200px;
8}
9
10.gap-grid-container div {
11 width: 100px;
12 background-color: lightskyblue;
13}
14
15.gap-flex-container {
16 display: flex;
17 gap: 50px;
18}
19
20.gap-flex-container div {
21 width: 80px;
22 background-color: lightgreen;
23}The gap property is used in grid layouts and flexbox layouts to set the spacing (gaps) between elements. Using this property, you can easily place space between child elements.
- In the
gap-grid-containerclass, a gap of30pxvertically and10pxhorizontally is set between each element. Since a 3-column grid is created withgrid-template-columns, gaps are applied vertically and horizontally between each element. In thegap-flex-containerclass, a gap of50pxis applied between the three items in the flexbox.
Basic Syntax
1.container {
2 display: grid; /* or flex */
3 gap: <row-gap> <column-gap>;
4}- The
row-gapspecifies the gap between rows. This is the vertical spacing in grid or flex layouts. - The
column-gapspecifies the gap between columns. This is the horizontal spacing.
If two values are not specified, one value is applied to both row-gap and column-gap.
Advantages of the gap property
The benefits of the gap property include the following:.
- Simple gap setting: The code to set gaps between child elements becomes simpler, eliminating the need to set extra margins or padding between elements.
- Flexible adaptation: It easily supports responsive design, allowing flexible design adjustments.
grid-template-areas property
1.grid-template-areas-container {
2 display: grid;
3 grid-template-columns: 1fr 2fr; /* 2 columns */
4 grid-template-rows: auto auto; /* 2 rows */
5 grid-template-areas:
6 "header header"
7 "sidebar content"
8 "footer footer"; /* In the 3rd row, the footer spans across */
9 gap: 10px;
10 height: 250px;
11}
12.grid-template-areas-container div {
13 width: 100%;
14 height: 100%;
15}
16.grid-template-areas-header {
17 grid-area: header; /* Placed in the "header" area */
18 background-color: lightblue;
19}
20.grid-template-areas-sidebar {
21 grid-area: sidebar; /* Placed in the "sidebar" area */
22 background-color: lightslategray;
23}
24.grid-template-areas-content {
25 grid-area: content; /* Placed in the "content" area */
26 background-color: lightskyblue;
27}
28.grid-template-areas-footer {
29 grid-area: footer; /* Placed in the "footer" area */
30 background-color: lightsteelblue;
31}The grid-template-areas property provides a way to name areas within a grid container and use those names to easily position grid elements. Using this property allows for visually intuitive layout definitions.
Elements positioned in named areas specified by the grid-template-areas property should have the same name assigned with the grid-area property. Even if elements span multiple cells, they are automatically positioned correctly.
In this example, the grid is created as follows:.
- In the first row, "header" is placed across two columns.
- "Sidebar" is placed on the left and "content" on the right in the second row.
- "Footer" is placed across two columns in the third row.
Basic Usage
1grid-template-areas:
2 "area1 area2 area3"
3 "area1 area4 area5";In the grid-template-areas property, the name of the area is specified for each row. By placing elements into regions with assigned names, you can easily create layouts.
- In this example, a grid with 2 rows and 3 columns is created, and each cell is named area1, area2, etc.
Defining empty cells using .
1grid-template-areas:
2 "header header header"
3 "sidebar . content"
4 "footer footer footer";If you want to have empty cells in your layout, you can represent empty cells using a . (dot).
- As in this example, by specifying a . between sidebar and content, the second column becomes blank.
Advantages of the grid-template-areas property
The advantages of the grid-template-areas property include the following points.
- Visual layout: It allows you to visually express the layout, making it easier to understand the design.
- Easy element movement: You can easily adjust the element layout by changing the area definitions in CSS without modifying the HTML.
Notes
When using the grid-template-areas property, it is important to pay attention to the following points.
- The number of names in each row must match the number of defined columns.
- If you assign the same name to multiple cells, those cells will be merged.
- If you assign the same name across different rows and columns, the area must form a rectangle.
inline-grid
1.inline-grid-container {
2 display: inline-grid;
3 grid-template-columns: 1fr 1fr;
4 gap: 5px;
5 background-color: lightblue;
6}
7.inline-grid-item {
8 background-color: lightskyblue;
9 width: 50px;
10 padding: 0;
11 margin: 0;
12}inline-grid is one of the values for the display property in CSS. Applying this property makes the element behave as an inline-level container, creating a grid formatting context internally. Unlike display: grid, it behaves as an inline element in the document flow.
Use cases of inline-grid
inline-grid is not as common as grid, but it can be effectively used in specific scenarios.
-
Grid within inline context: Useful when you want to place a grid alongside text content or other inline elements. For example, it is helpful when a grid structure is needed for buttons, badges, labels, etc., but you want to display inline without disrupting the text flow.
-
Layout control within inline elements: Even when complex layouts are needed within inline elements like links, buttons, or spans,
inline-gridcan manage the internal structure with a grid layout while avoiding block display.
1<button class="inline-grid">
2 <span>Icon</span>
3 <span>Text</span>
4</button>In this case, the button displays icons and text in a grid, while remaining inline in the document flow.
- Responsive inline components:
inline-gridcan be used for small components that are part of inline content and require a grid layout. For example, it is suitable for inline forms, badges, product labels, etc., where you want to adjust the layout with a grid while keeping it inline.
Alignment and sizing of inline-grid
1.inline-grid {
2 display: inline-grid;
3 vertical-align: middle;
4}- Like other inline elements,
inline-gridrespects vertical alignment relative to surrounding content. You can control the alignment of the grid using thevertical-alignproperty.
1.inline-grid {
2 display: inline-grid;
3 width: 200px;
4 height: 100px;
5}- Regarding size, an
inline-gridelement occupies only the width required by its grid content. If necessary, you can explicitly set the width, height, and minimum/maximum dimensions.
1.inline-grid {
2 display: inline-grid;
3 grid-template-columns: auto 1fr;
4}It is also possible for the layout of the grid itself to determine the size of the inline-grid container, and this tendency is stronger when using flexible units such as fr, auto, and percentages.
You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.