0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>In order to quickly outline a simple grid structure, we need to make good use of the grid-row-start/grid-row-end and grid-column-start/grid-column-end properties. This is what we did in the previous assignments. But wouldn’t you agree that it turned out to be somewhat verbose?</p>
1
<p>In order to quickly outline a simple grid structure, we need to make good use of the grid-row-start/grid-row-end and grid-column-start/grid-column-end properties. This is what we did in the previous assignments. But wouldn’t you agree that it turned out to be somewhat verbose?</p>
2
<p>We have a faster way of creating a grid, and this method consists of using the grid-template-areas and grid-area properties.</p>
2
<p>We have a faster way of creating a grid, and this method consists of using the grid-template-areas and grid-area properties.</p>
3
<p>Do you remember the game of “tic-tac-toe”, where we inserted 3-by-3 icons in the grid?</p>
3
<p>Do you remember the game of “tic-tac-toe”, where we inserted 3-by-3 icons in the grid?</p>
4
<p>So, we will use the grid-template-areas property to work in a similar way. We will literally mark our future grid visually cell-by-cell.</p>
4
<p>So, we will use the grid-template-areas property to work in a similar way. We will literally mark our future grid visually cell-by-cell.</p>
5
<p>Let’s give an example. Let’s say that we want to lay out a simple 3-by-3 grid, which consists of three columns:</p>
5
<p>Let’s give an example. Let’s say that we want to lay out a simple 3-by-3 grid, which consists of three columns:</p>
6
<p>In the markup, we have a container with three children elements:</p>
6
<p>In the markup, we have a container with three children elements:</p>
7
<div class="grid"> <div class="grid-element-1"></div> <div class="grid-element-2"></div> <div class="grid-element-3"></div> </div><p>We need to describe the grid areas in the CSS:</p>
7
<div class="grid"> <div class="grid-element-1"></div> <div class="grid-element-2"></div> <div class="grid-element-3"></div> </div><p>We need to describe the grid areas in the CSS:</p>
8
grid-template-areas: "red yellow green" "red yellow green" "red yellow green";<p>The lines in the grid-template-areas property value are nothing more than a visual representation of the rows of a grid, and the values in the lines are the representations of columns.</p>
8
grid-template-areas: "red yellow green" "red yellow green" "red yellow green";<p>The lines in the grid-template-areas property value are nothing more than a visual representation of the rows of a grid, and the values in the lines are the representations of columns.</p>
9
<p>Ah-ha! Thus, do you now feel that you know how to create any shape grid using this method? Alas, if you said yes, then you would be wrong, since there is a slight limitation to the type of grids we can create: the grid structure must be rectangular in shape, and the number of declared columns in each line should be the same.</p>
9
<p>Ah-ha! Thus, do you now feel that you know how to create any shape grid using this method? Alas, if you said yes, then you would be wrong, since there is a slight limitation to the type of grids we can create: the grid structure must be rectangular in shape, and the number of declared columns in each line should be the same.</p>
10
<p>The names of areas should start with a letter and may include numbers and hyphens. For example, "lava lava2 lava-3" is a valid value for grid-template-areas. The names that are listed in the lines are separated by one or more spaces.</p>
10
<p>The names of areas should start with a letter and may include numbers and hyphens. For example, "lava lava2 lava-3" is a valid value for grid-template-areas. The names that are listed in the lines are separated by one or more spaces.</p>
11
<p>Laying out how the cells should be arranged in a grid using grid-template-areas is half the battle. Now we need to connect the visual representation with the specific elements in the HTML. The grid-area property will help us do this.</p>
11
<p>Laying out how the cells should be arranged in a grid using grid-template-areas is half the battle. Now we need to connect the visual representation with the specific elements in the HTML. The grid-area property will help us do this.</p>
12
<p>So let’s write the following:</p>
12
<p>So let’s write the following:</p>
13
<blockquote>grid-element-1, you will assigned to the red area, grid-element-2, you will be given yellow, and you, grid-element-3 will be assigned green.</blockquote>.grid-element-1 { grid-area: red; } .grid-element-2 { grid-area: yellow; } .grid-element-3 { grid-area: green; }<p>Note that the grid-area name that is assigned to each element must be unique. For example, if there are 6 grid items, then there must be 6 names for the grid-area:</p>
13
<blockquote>grid-element-1, you will assigned to the red area, grid-element-2, you will be given yellow, and you, grid-element-3 will be assigned green.</blockquote>.grid-element-1 { grid-area: red; } .grid-element-2 { grid-area: yellow; } .grid-element-3 { grid-area: green; }<p>Note that the grid-area name that is assigned to each element must be unique. For example, if there are 6 grid items, then there must be 6 names for the grid-area:</p>
14
grid-template-areas: "green green red yellow" "yellow2 red2 green2 yellow" "yellow2 red2 green2 yellow";<p>And then you need to spell out its grid-area name for each element ranging from the first to the sixth one.</p>
14
grid-template-areas: "green green red yellow" "yellow2 red2 green2 yellow" "yellow2 red2 green2 yellow";<p>And then you need to spell out its grid-area name for each element ranging from the first to the sixth one.</p>
15
<p>Only one grid area can be assigned to an element in the HTML markup. If a single grid area is assigned several HTML elements, then only one will be valid, namely the one with the most specific declaration.</p>
15
<p>Only one grid area can be assigned to an element in the HTML markup. If a single grid area is assigned several HTML elements, then only one will be valid, namely the one with the most specific declaration.</p>
16
.grid-element-1 { grid-area: red; /* The grid area is assigned to the first element */ } .grid-element-2 { grid-area: red; /* The grid area red is reassigned to the second element */ }<p>So, we have finally discovered the secret of how to quickly create simple grids. Shall we apply what we have learned in practice?</p>
16
.grid-element-1 { grid-area: red; /* The grid area is assigned to the first element */ } .grid-element-2 { grid-area: red; /* The grid area red is reassigned to the second element */ }<p>So, we have finally discovered the secret of how to quickly create simple grids. Shall we apply what we have learned in practice?</p>