Grid Areas Not Laying Out Properly in CSS Grid

Grid areas not laying out properly in CSS Grid

When using the grid-template-areas property, string values must have the same number of columns.

.grid {  display: grid;  grid-template-columns: 1fr 1fr;  grid-template-rows: 1fr 1fr;  grid-template-areas: "logo faq" "about-us about-us";}
.logo { background-color: blue; grid-area: logo;}
.faq { background-color: red; grid-area: faq;}
.aboutUs { background-color: cyan; grid-area: about-us;}
<div class="grid">  <div class="logo">    LOGO  </div>  <div class="faq">    FAq  </div>  <div class="aboutUs">    About-us  </div></div>

Why isn't grid-template-areas property valid?

Simplify your grid to:

i1 i2 i3
i4 i5 i6

After you have done that, aply a grid row/column gap of 40px.

.items {
display: grid;
grid-column-gap: 40px;
grid-row-gap: 40px;
grid-template-columns: repeat(1fr);
grid-template-areas:
"i1 i2 i3"
"i4 i5 i6";
}

.i1 { grid-area: i1; }
.i2 { grid-area: i2; }
.i3 { grid-area: i3; }
.i4 { grid-area: i4; }
.i5 { grid-area: i5; }
.i6 { grid-area: i6; }
<div class="items">
<div class="i1">1</div>
<div class="i2">2</div>
<div class="i3">3</div>
<div class="i4">4</div>
<div class="i5">5</div>
<div class="i6">6</div>
</div>

CSS grid and grid area assignment not working as intended

There is an error in grid-template-areas, the last row only has 5 columns.

I'm guessing it should be:

  grid-template-areas:". . . . . ."
". . . . . ."
". logo logo logo logo . "
". . . . . . "
". input input input input ."
". . compute_button compute_button . .";

css grid-template-areas property not aligning grid items

You are trying to name multiple grid areas “blogart”, but this is invalid. You cannot name multiple grid areas with the same name.

There are several ways to define a grid, apart from using named template areas. Instead of using grid-template-areas in your inner grid, you might want to rely on the grid auto-placement algorithm.

Try something like this:

.main {
background: #33a8a5;
grid-area: main;

display: grid;

grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-gap: 20px;
}

Then, each grid item in the grid will automatically lay out, one per grid cell, for three columns, until they have all been placed.


edit

Here’s a more complete demo: https://codepen.io/keithjgrant/pen/JNGNKX

I made a few changes:

  • I removed the grid-template-rows from the outer grid. You had constrained the heights of each row; it's better to allow the contents to grow/shrink automatically as necessary.
  • I removed the grid-template-areas from the inner grid and the grid-area from its grid items. This allows them to lay out naturally, in the order they appear. Each grid item will fill one grid cell by default.
  • I added a grid-column: span 2 to the img, since you want that to span 2 columns.

Play around with that. Notice you can now add (or remove) as many “blogart” elements you want, and the layout still works.

My CSS Grid doesn't scale properly with content height-wise

You could have done this with flex, To the best of my knowledge grid is not made for that purpose!

Here's an example made with flex

body {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: #171615;
}

.header {
/* If you don't want the header to be sticky on scroll remove these lines */
position: sticky;
top: 0;
/* If you don't want the header to be sticky on scroll remove these lines */
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
background: #171615;
}

.header-logo {
height: 55px;
}

.logo {
height: 100%;
width: 135px;
object-fit: cover;
}

.header-menu {
display: flex;
flex-flow: row wrap;
}

.header-menu a {
color: #f1f1f1;
padding: 12px;
text-decoration: none;
border-radius: 4px;
margin-right: 8px;
white-space: nowrap;
}

.header a.active {
background: dodgerblue;
}

.login {
background-color: dodgerblue;
}

.header-menu a:hover {
background-color: #ddd;
color: black;
}

.wrapper {
width: 70%;
color: white;
}


/* you can remove this part */

.white-space {
display: flex;
height: 800px;
font-size: 3rem;
background: darkgray;
}


/* you can remove this part */
<div class="header">
<div class="header-logo">
<a href="#"><img class="logo" src="https://via.placeholder.com/135x55" alt="Logo" /></a>
</div>
<div class="header-menu">
<a class="active" href="#">Home</a>
<a class="active" href="#">Games</a>
<a class="active" href="#">Web Projects</a>
<a class="login" href="#">Login</a>
<a href="#">Contact</a>
<a href="#">About</a>
</div>
</div>
<div class="wrapper">
<!-- put your content here -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
<div class="white-space">
<h2 style="margin: auto">White Space</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
<!-- put your content here -->
</div>

CSS Grid: grid-row/column-start/end VS grid-area + grid-template-area

There seems to be two ways of deciding how many cells a grid item spans:

To be more precise there are 3 ways to place items. From the specification:

The contents of the grid container are organized into individual grid items (analogous to flex items), which are then assigned to predefined areas in the grid. They can be explicitly placed using coordinates through the grid-placement properties or implicitly placed into empty areas using auto-placement. §8 Placing Grid Items

So either you consider area, coordinate or you leave the job to the browser for the auto placement. Basically you can use only one way.

Note that grid-area is the shorthand property for the explicit placement which can also be replace by grid-row-start; grid-column-star; grid-row-end; grid-column-end;

Here is a simple example to illustrate: