Stacked grid-template-areas

Forum|Forum|1 year ago
August 20, 2024
2 replies
1140 views

Hi everyone,

A quick question regarding stacked grid-template-areas.

Here is a grid with three columns and three rows. Simple enough.

.grid-container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto auto 100px;
grid-template-areas:
"header header header"
"sidebar content related"
"footer footer footer";
gap: 20px;
}

But in this example, I have one grid item stacked over another. How should I label the grid-template areas? Stack? When I redefine the grid area for the two grid items (.image and .text) the grid breaks down.

.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr auto 1fr;
grid-template-areas: stack;
gap: 20px;
}
.image {
grid-area: 1 / 1 / 4 / 6;
}
.text {
grid-area: 2 / 2 / 3 / 4;
color: white;
}

Thanks.

Mark

How to

This topic has been closed for replies.

O

osgood_

Legend

You would'nt use grid-template-areas on the parent container when stacking containers. You would position the containers using the grid lines and grid columns.

I prefer to use the long hand version to place containers on the grid ie 'span'. Below is an example of a text container stacked above a container which could contain an image.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stacked container using grid</title>
<style>
body {
margin: 0;
}
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr auto 1fr;
background-color: red;
height: calc(100vh - 100px);
padding: 50px;
}
.image {
grid-column: 1 / span 5;
grid-row: 1 / span 3;
background-color: #000;
}
.text {
grid-column: 2 / span 3;
grid-row: 2;
display: grid;
place-content: center;
background-color: dodgerblue;
color: #fff;
padding: 30px
}

</style>
</head>
<body>
<div class="grid-container">
<div class="image"></div>

<div class="text">
<p>Some text overlays the black box which would contain an image</p>
</div>

</div>

</body>
</html>

F

Fun SeekerAuthor

Inspiring

Hi Osgood,

Yeah, I see you can't do it; I tried several different ways. I'm using grid columns, and it's working, but I need to read more about grid lines. The more tools you have in your toolbox the better.

Thanks.

Mark

O

osgood_

Legend

Hi Osgood,

Yeah, I see you can't do it; I tried several different ways. I'm using grid columns, and it's working, but I need to read more about grid lines. The more tools you have in your toolbox the better.

Thanks.

Mark

By @Fun Seeker

I'm not totally convinced you really need grid to produce a website. I think it is way too complex and there are too many variations which may be putting developers off or at least slow on the uptake. Its been around for several years now and l get the feeling its not taken hold perhaps as it was initially thought. Also a lot of developers use frameworks which can't adopt it fully as yet.