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 thegrid-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:
.grid {
display:inline-grid;
grid-template-areas:
"a b"
"c d";
grid-gap:20px;
border:1px solid;
}
span {
width:50px;
height:50px;
background:red;
}
.one > span {
grid-area:a;
grid-row-start:1;
grid-row-end:3;
grid-column-start:1;
grid-column-end:3;
}
.two > span {
grid-row-start:1;
grid-row-end:3;
grid-column-start:1;
grid-column-end:3;
grid-area:a;
}
<div class="grid one">
<span></span>
</div>
<div class="grid two">
<span></span>
</div>
Related Topics
Regular Expression For Extracting Tag Attributes
In Indexeddb, How to Make a Sorted Compound Query
Use CSS Gradient Over Background Image
Change Cursor Type on Input Type="File"
What Is Currently the Best Way to Get a Favicon to Display in All Browsers That Support Favicons
Position: Sticky' Not Working When 'Height' Is Defined
Position Absolute and Overflow Hidden
How to Put an Input Element on the Same Line as Its Label
Is <Div> Inside <Label> Block Correct
Embed Image in a ≪Button≫ Element
Using CSS :Before and :After Pseudo-Elements With Inline Css
Stretch Text to Fit Width of Div
Href Overrides Ng-Click in Angular.Js
Soft Hyphen in HTML (<Wbr> VS. &Shy;)
Display HTML Child Element When Parent Element Is Display:None
How to Make an Element's Background-Color a Little Darker Using CSS