Stacked grid-template-areas

Report · Aug 20, 2024

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

Report · Aug 20, 2024

Specs with examples:

CSS Tricks ~ Grid-Template-Areas

https://css-tricks.com/almanac/properties/g/grid-template-areas/

MDN ~ Grid-Template-Areas

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas

W3C ~ Grid Layout Module Level 2

https://drafts.csswg.org/css-grid/#common-uses-named-areas

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 20, 2024

Hi Nancy, thanks for the links. I've been reading and reading. It's all helpful.

Kind regards,

Mark

Report · Aug 20, 2024

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>

Report · Aug 20, 2024

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

Report · Aug 20, 2024

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.

Report · Aug 20, 2024

Hi Osgood,

I agree, but I love learning new things and it differs from Flexbox. There are so many different frameworks, code editors, WP themes and page builders, front-end design programs like Figma, etc., it's hard to keep up. They all offer something different, but there is also plenty of overlap. There will be winners and losers. Sadly, Dreamweaver is one of the latter.

Thanks again.

Mark

Report · Aug 20, 2024

Although I rarely use them in production, GRIDS have advantages in special situations when precise control of items in 2-D layouts are required. Good examples are games and online apps. But for most web pages, FLEXBOX's simpler 1-axis layouts are easier to work with.

GRID GARDEN ~ A game for learning CSS GRIDS.

https://cssgridgarden.com/

Have fun!

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 20, 2024

Hi Osgood,

I agree, but I love learning new things and it differs from Flexbox. There are so many different frameworks, code editors, WP themes and page builders, front-end design programs like Figma, etc., it's hard to keep up. They all offer something different, but there is also plenty of overlap. There will be winners and losers. Sadly, Dreamweaver is one of the latter.

Thanks again.

Mark

By @Fun Seeker

As per @osgood_ and @Nancy OShea, I would suggest to not waste your time on CSS Grid. When CSS Grid first appeared in the dictionary, I gave it a lot of my time only to find out that Flexbox was far easier to learn and use. Yes, there are specific cases where it may be required. However, in 99.9% of the time, Flexbox will suffice.

Instead, spend time on current workflows. Have a look at what WordPress has done. Not only WordPress, but the whole web developer community has shifted to using Web API's.

Wappler, the only real Dreamweaver alternative.

Report · Aug 21, 2024

Also WP Block Themes have revolutionized the Full Site Editing (FSE) experience from WordPress' dashboard. No special add-ons or plugins required.

https://www.wpzoom.com/blog/what-are-wordpress-block-themes/

The drag-and-drop ease and the ability to see changes in real-time offer a more intuitive design experience. Users can create custom headers, footers, and even entire page layouts without coding knowledge.

Nancy O'Shea— Product User, Community Expert & Moderator

Adobe Community

Stacked grid-template-areas