- Theory
- Theory
- Comments
Negative values for grid-column-start and grid-column-end
One interesting feature of grid cells is that you can count their coordinates either from the start (first line of the row or column) or end of the grid (last line of the row or column). Here is how it looks schematically:
In other words, to tell the cell: “Start on the first column line counted from the start and end on the first column line counted from the end“, you need to specify the following code:
.element {
grid-column-start: 1;
grid-column-end: -1;
}And in order to tell the cell: “Start on the first column line counted from the end of the grid and on the first line counted from the start”, you need to write:
.element {
grid-column-start: -1;
grid-column-end: 1;
}Let’s see how we can use this device in practice:
- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Negative values for grid-column-start and grid-column-end</title>
<link href="world.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body class="world">
<div class="land land--guided land--task-4">
<div class="element element--water">Water</div>
<div class="element element--grass">Grass</div>
</div>
</body>
</html>
CSS
.land {
display: grid;
grid-template-columns: 125px 125px 125px 125px;
grid-template-rows: 125px 125px 125px 125px;
}
.element--water {
grid-row-start: 2;
grid-row-end: 4;
grid-column-start: 1;
grid-column-end: 3;
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
- For the
.element--grassblock assign the following grid item coordinates for the rows: start coordinate of4and end coordinate of5, - and then assign the following coordinates for the columns: start coordinate of the first line counted from the start of the grid and end coordinate of the first line counted from the end of the grid.
- After that, change the coordinates for the columns to the following: start coordinate of
-1and end coordinate of1.
Comments