- Theory
- Theory
- Comments
The grid item’s position: grid-row-start and grid-row-end
Great job! But what if we want to stretch a cell across rows as well?
We can use the grid-row-end property to do this. It works in conjunction with grid-row-start and assigns the coordinates we want to the cell.
In the example above, the cell starts on row line 2 and ends on row line 4.
The code looks like the following:
grid-row-start: 2 means that the element starts on row line 2.
grid-row-end: 4 means that the element ends on the 4th row line.Now let’s try to lay out our grid item so that it stretches across two rows and two columns at the same time.
- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The grid item’s position: grid-row-start and grid-row-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-3">
<div class="element element--water">Water</div>
</div>
</body>
</html>
CSS
.land {
display: grid;
grid-template-columns: 125px 125px 125px 125px;
grid-template-rows: 125px 125px 125px 125px;
}
.element {
grid-row-start: 3;
grid-column-start: 3;
grid-column-end: 5;
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
- For the
.elementblock assign the following grid item coordinates for the columns: start coordinate of1and end coordinate of3, - and then assign the coordinates for the rows: start on row
2and end on row4.
Comments