Provide grid cells or regions to place objects on a CSS Grid. CSS Grid’s default auto-placement mechanism fills cells from left to right, top to bottom, but you may define grid items’ location and size using properties.
The primary properties for precise item placement based on grid lines are:
- grid-column-start
- grid-column-end
- grid-row-start
- grid-row-end
These parameters inform a grid item where to start and terminate on the column and row axes. Apply these parameters to grid objects to determine their placement.
Grid lines utilise these attributes. Grid lines divide grid cells and form the grid. The grid lines can be either vertical or horizontal. CSS Grid gives integers to all grid lines, starting at 1 from the top-left corner and rising left to right and top to bottom. Another origin assigns negative numbers from -1 from the bottom-right corner.
These placement attributes have an auto value by default, allowing CSS Grid to put items using the left-to-right, top-to-bottom flow. However, you may specify start and finish positions.
Basic Placement with Numbers
Require the starting and ending grid line numbers for an item.
Example
if you have a grid container with defined columns and rows using grid-template-columns and grid-template-rows, you can place a specific item within that grid:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr ;
grid-template-rows: 1fr 1fr;
background-color: #2196F3;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-column-start:2;
grid-column-end: span 3 ;
grid-row-start: span 4;
grid-row-end: 5;
}
</style>
</head>
<body>
<section class="container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
<div class="item item4">Item 4</div>
<div class="item item5">Item 5</div>
<div class="item item6">Item 6</div>
<div class="item item7">Item 7</div>
<div class="item item8">Item 8</div>
<div class="item item9">Item 9</div>
<div class="item item10">Item 10</div>
<div class="item item11">Item 11</div>
<div class="item item12">Item 12</div>
</section>
</body>
</html>In the above example, grid-column-start: 1; means the item’s left edge aligns with the first vertical grid line, and grid-column-end: 2; means its right edge aligns with the second vertical grid line. Similarly, grid-row-start: 2; aligns the top edge with the second horizontal grid line, and grid-row-end: 3; aligns the bottom edge with the third horizontal grid line.
Use negative numbers. For instance, -1 refers to the last grid line. grid-column-end: -1; would make an item span to the very last vertical grid line.
Crossing Grid Tracks with span
Without naming an end line, you can instruct an object to span a particular number of grid tracks (cells) from its beginning line or to a designated grid line. Use span followed by a number or grid line name.
- span <n>: Tells the browser to enlarge the element across n tracks.
- span <name>: Tells the browser to enlarge the element until it encounters the grid line named <name>.
Example using span <n>:
.item2 {
/* Start at column line 1 and span 2 columns */
grid-column-start: 1;
grid-column-end: span 2;
/* Start at row line 1 and span 3 rows */
grid-row-start: 1;
grid-row-end: span 3;
}The above example, grid-column-end: span 2; means enlarge the element to a width of two columns. If the element already starts at the second column, grid-column-end: span 2; not do much, but if it begins in the first column, it will fill two adjacent grid cells.
An below example shows the header and footer spanning two columns:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-areas:
"header header zz"
"content content yy"
"footer xx xx ";
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 1fr 100px;
gap: 1em;
}
header {
grid-area: header;
background-color: #f0f0f0;
padding: 1em;
}
aside {
grid-area: sidebar;
background-color: #d3eaf2;
padding: 1em;
}
main {
grid-area: content;
background-color: #e0f7df;
padding: 1em;
}
footer {
grid-area: footer;
background-color: #f0f0f0;
padding: 1em;
}
.aa{
grid-area:zz;
background-color:red;
padding:1em;
}
.ab{
background-color:green;
padding:1em;
grid-area:yy;
}
.ac{
background-color:yellow;
padding:1em;
grid-area:xx;
}
</style>
</head>
<body>
<div class="container">
<header>Header</header>
<aside>Sidebar</aside>
<main>Content</main>
<footer>Footer</footer>
<div class="aa"></div>
<div class="ab"></div>
<div class="ac"></div>
</div>
</body>
</html>When using span, you can specify either the start or the end line and then use span from that point. For example, grid-row: 6 / span 2; tells the item to start at grid line 6 and span 2 rows. Conversely, grid-row: span 2 / 8; tells the item to end at grid line 8 and span 2 rows back from there.
Placement with Named Grid Lines
Working with numbers, especially in larger or more complex grids, can become difficult to understand. CSS Grid allows you to name grid lines to make your code more readable and self-descriptive.
Name grid lines when defining the grid template for the container using square brackets [] around the desired name(s). You can assign multiple names to a single grid line by separating them with spaces.
Examle
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
/* Define columns and name lines:
Line 1: sidebar-start
Line 2: sidebar-end and content-start
Line 3: content-end */
grid-template-columns: [sidebar-start] 1fr [sidebar-end content-start] 3fr [content-end]; /* */
/* Define rows and name lines:
Line 1: header-start
Line 2: header-end and content-start (for main content)
Line 3: content-end (for main content) */
grid-template-rows: [header-start] 100px [header-end content-start] 1fr [content-end]; /* - Note: This example assumes a simple 2-row content area for illustration */
gap: 1em; /* Optional: Add space between tracks */
}
header {
/* Place header using named lines */
grid-column-start: sidebar-start; /* */
/* Span to the named content-end line */
grid-column-end: content-end; /* Based on spanning to a named gap/line */
/* Alternative shorthand: */
/* grid-column: sidebar-start / content-end; */
grid-row-start: header-start; /* */
grid-row-end: header-end; /* */
/* Alternative shorthand: */
/* grid-row: header-start / header-end; */
background-color: #f0f0f0; /* Just for visibility */
padding: 1em;
}
aside { /* Represents the sidebar */
/* Place sidebar using named lines */
grid-column-start: sidebar-start; /* */
grid-column-end: sidebar-end; /* */
/* Alternative shorthand: */
/* grid-column: sidebar-start / sidebar-end; */
grid-row-start: content-start; /* */
grid-row-end: content-end; /* */
/* Alternative shorthand: */
/* grid-row: content-start / content-end; */
background-color: #d3eaf2; /* Just for visibility */
padding: 1em;
}
main {
/* Represents the content */
/* Place main content using named lines */
grid-column-start: content-start; /* */
grid-column-end: content-end; /* */
/* Alternative shorthand: */
/* grid-column: content-start / content-end; */
grid-row-start: content-start; /* */
grid-row-end: content-end; /* */
/* Alternative shorthand: */
/* grid-row: content-start / content-end; */
background-color: #e0f7df; /* Just for visibility */
padding: 1em;
}
footer {
/* Example using implicit grid area naming if lines were named *-start and *-end */
/* If we had lines named footer-start/footer-end horizontally and vertically */
/* then grid-area: footer; could place the footer */
/* For this example, place it using named lines: spans from sidebar-start to content-end */
grid-column: sidebar-start / content-end; /* */
grid-row: content-end / span 1; /* Place after the main content area */
background-color: #f0f0f0; /* Just for visibility */
padding: 1em;
}
</style>
</head>
<body>
<div class="container">
<header>Header</header>
<aside>Sidebar</aside>
<main>Content</main>
<footer>Footer</footer>
<div class="aa"></div>
<div class="ab"></div>
<div class="ac"></div>
</div>
</body>
</html>Once lines are named, you can use these names instead of numbers in the placement properties.
Example using named lines:
header {
/* Place header starting at the 'sidebar-start' line and ending at the 'content-end' line */
grid-column-start: sidebar-start;
grid-column-end: content-end; /* This could also be 'span content-end' which means span until the line named 'content-end' */
}
.aa {
/* Place item spanning from 'center-start' line to 'center-end' line (assuming these lines exist) */
grid-column: center-start / center-end;
/* Place item spanning from 'middle-start' line to 'middle-end' line (assuming these lines exist) */
grid-row: middle-start / middle-end;
}
When using named lines, you might need to clearly define the *-start property, with numbers, the default auto value works if the item starts at the beginning of an available space. Using names like “sidebar end” and “content start” for the same line allows decoupling the name from the structure. Someone reading the code can understand the placement better (e.g., header spans from the start of the sidebar to the end of the content).
Shorthand Properties
Instead of using the four separate *-start and *-end properties, you can use the shorthand properties grid-column and grid-row. These shorthands accept the start and end values separated by a forward slash /.
.item3 {
/* Equivalent to grid-row-start: 2; and grid-row-end: span 3; */
grid-row: 2 / span 3;
/* Equivalent to grid-column-start: 4; and grid-column-end: span 5; */
grid-column: 4 / span 5;
}use named lines with the shorthand:
.item3 {
/* Place item from line 'navigation' to line 'footer' (assuming these lines exist) */
grid-row: navigation / footer;
/* Place item from line 'sidebar' to line 'content' (assuming these lines exist) */
grid-column: sidebar / content;
}Any valid value for the expanded *-start and *-end attributes is also valid for the grid-row and grid-column shortcuts.
With the help of these characteristics, you are able to exactly determine the location inside the grid where an object will be put. Beyond the auto-placement feature that is default, there are numerous ways to modify the layout that may be achieved through the use of line numbers, named lines, or the span keyword. The sources also cover the use of grid-area, which is a method that assigns an item to a specified rectangular area that is defined in the grid template. This method provides a nearly visual depiction of the grid layout within the CSS code.
CSS3 Topics