As a CSS Grid beginner, I am working on creating a simple layout for my personal blog using codepen.io
Visit my codepen.io project here
I aim to have multiple rows with full width, each containing various divs of different widths centered within the row. My goal is to have up to 10 divs arranged vertically in a single row. However, I'm facing challenges and it's not functioning as expected. Here's a basic image of what I'm trying to achieve (link provided below).
This is the HTML structure I'm using:
<div class="container">
<div class="box menu">Menu items</div>
<div class="box header">Header with custom inner box color</div>
<div class="box posts">Blog posts go here...</div>
<div class="box posts">
<div class="post_small_width">Small width post</div>
<div class="post_medium_width">Medium width post</div>
</div>
<div class="box pages">Pages section with specific width and center alignment</div>
<div class="box footer">Site footer</div>
</div>And this is the corresponding CSS code:
* {
/* box-sizing: border-box; */
}
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"menu"
"header"
"posts"
"post_small_width"
"post_medium_width"
"pages"
"footer"
;
grid-template-rows: auto;
}
.menu {
grid-area: menu;
background-color: #444;
padding: 10px;
}
.header {
grid-area: header;
background-color: pink;
height: 100px;
width: 600px;
margin: auto;
}
.posts {
margin:auto;
background-color: yellow;
grid-area: posts;
padding-top: 10px;
padding-bottom: 10px;
}
.pages {
background-color: #ccc;
grid-area: pages;
}
.post_small_width {
background-color: red;
grid-area: post_small_width;
}
.post_medium_width {
background-color: red;
grid-area: post_medium_width;
}
.footer {
background-color: black;
color: white;
padding: 10px;
grid-area: footer;
}
.box {
}
Check out the sample visual layout here.