Positioning Elements in CSS Grid: Architecture of Pyramid Chambers

Welcome back! Now that you know the basics of CSS Grid, it's time to learn how to precisely position elements within the grid. By default the grid places items one after another, cell by cell, like workers laying blocks from left to right. The throne room, however, cannot stand wherever the queue happens to put it. Imagine you are an architect of a pyramid and must carefully plan where each chamber, corridor and throne room will be located. In CSS Grid, you have powerful positioning tools at your disposal!

Let's recall the construction plan. Every Grid layout is built in the same order: first a container with display: grid, then columns (grid-template-columns), rows (grid-template-rows) and gaps (gap), and finally the positioning of items, which this lesson is about. You can describe columns manually with fixed pixels, with fr proportions, with the repeat(3, 1fr) pattern or fully automatically with repeat(auto-fill, minmax(250px, 1fr)).

Grid Lines

Every grid has numbered lines, both vertical (column lines) and horizontal (row lines). Numbering starts from 1. If you have 3 columns, you have 4 column lines (1, 2, 3, 4). Let's see it on a three-by-three grid:

1.container {
2  display: grid;
3  grid-template-columns: 1fr 1fr 1fr;
4  grid-template-rows: 100px 100px 100px;
5  gap: 10px;
6}

In the example above, we have column lines 1-4 and row lines 1-4. You can also count lines from the end: -1 means the last line, which will come in handy in the next lesson.

grid-column and grid-row

To place an element at a specific position in the grid, we use the grid-column and grid-row properties. We specify the start line and the end line, separated by a slash:

1.throne-room {
2  grid-column: 1 / 3;  /* From line 1 to line 3 = spans 2 columns */
3  grid-row: 1 / 2;     /* From line 1 to line 2 = spans 1 row */
4}
5
6.corridor {
7  grid-column: 3 / 4;  /* Only the third column */
8  grid-row: 1 / 4;     /* Stretches across 3 rows */
9}

The throne room takes the first two columns of the top floor, while a narrow corridor runs through all three floors in the last column. Note the most common mistake: 1 / 3 does not mean three columns. The element ends at line 3, so it occupies only the first and second columns.

The span Keyword

Instead of specifying line numbers, you can use the span keyword to define how many cells an element should occupy. It is handy when you know the size of a chamber but do not want to count lines:

1.grand-hall {
2  grid-column: span 2;  /* Stretch across 2 columns */
3  grid-row: span 3;     /* Stretch across 3 rows */
4}
5
6.small-chamber {
7  grid-column: 2 / span 1;  /* Start from line 2, occupy 1 column */
8}

The grand hall starts wherever automatic placement puts it and stretches across 2 columns and 3 rows. The small chamber starts at line 2 and takes one column. So you can combine both notations: give the start line as a number and the length with the span keyword.

grid-area - Shorthand Notation

The grid-area property lets you define an element's position in a single line. Format: grid-area: row-start / column-start / row-end / column-end. The order is the opposite of margin: there we go clockwise, while here we give the top, the left side, the bottom and the right side:

1.pharaoh-chamber {
2  grid-area: 1 / 1 / 3 / 3;
3  /* Row 1-3, column 1-3 = a 2x2 square */
4}
5
6.guard-post {
7  grid-area: 3 / 1 / 4 / 4;
8  /* Last row, full width */
9}

The pharaoh's chamber takes a 2x2 square in the top left corner, and the guard post takes the whole last row of a three-column grid. You can also put the name of an area from grid-template-areas, which you met in the first Grid lesson, into grid-area.

Practical Example: Temple Floor Plan

Let's combine everything in a temple floor plan. We start with an HTML structure of five rooms, written simply one below another:

1<div class="temple">
2  <div class="entrance">Entrance</div>
3  <div class="main-hall">Main Hall</div>
4  <div class="side-chapel">Side Chapel</div>
5  <div class="inner-sanctuary">Inner Sanctuary</div>
6  <div class="treasury">Treasury</div>
7</div>

The order of elements in HTML does not have to match their place on the plan, because CSS decides that. The grid has four columns and three rows of 120px, and every chamber gets its own coordinates:

1.temple {
2  display: grid;
3  grid-template-columns: repeat(4, 1fr);
4  grid-template-rows: repeat(3, 120px);
5  gap: 8px;
6}
7
8.entrance {
9  grid-column: 2 / 4;  /* Middle columns */
10  grid-row: 1;
11}
12
13.main-hall {
14  grid-column: 1 / 5;  /* Full width */
15  grid-row: 2;
16}
17
18.side-chapel {
19  grid-column: 1 / 2;
20  grid-row: 3;
21}
22
23.inner-sanctuary {
24  grid-column: 2 / 4;
25  grid-row: 3;
26}
27
28.treasury {
29  grid-column: 4 / 5;
30  grid-row: 3;
31}

The entrance stands in the two middle columns of the first row, the main hall spans the full width because four columns end at line 5, and in the last row the chapel, the sanctuary and the treasury stand side by side. grid-row: 1 is a shorthand: the element starts at line 1 and takes one row. Remember that screen readers and the keyboard follow the order in the HTML, not the order on the screen, so do not rearrange elements so much that this logic falls apart.

My advice: use span for individual items, and describe the plan of a whole page with line numbers or named areas. In the sandbox below you will find the same temple plan. Move the treasury to the first column and see how the layout changes. In the next lesson you will learn negative line numbers and named grid lines.

With these techniques, you can precisely arrange elements within the grid, just like an architect planning every chamber in an Egyptian temple. Remember: line numbers are coordinates on the pyramid's plan, because you point to where a chamber starts and at which line it ends.

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>Positioning in CSS Grid</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Egyptian Temple Plan</h1>
11    <div class="temple">
12        <div class="entrance">Entrance</div>
13        <div class="main-hall">Main Hall</div>
14        <div class="side-chapel">Side Chapel</div>
15        <div class="inner-sanctuary">Inner Sanctuary</div>
16        <div class="treasury">Treasury</div>
17    </div>
18    <!-- Task: Use grid-column and grid-row to place the elements -->
19    <!-- Entrance: columns 2-4, row 1 -->
20    <!-- Main Hall: full width (1-5), row 2 -->
21    <!-- Side Chapel: column 1, row 3 -->
22    <!-- Inner Sanctuary: columns 2-4, row 3 -->
23    <!-- Treasury: column 4, row 3 -->
24</body>
25</html>