Basically, I'm building a grid in HTML/CSS using flexbox and grids to get the desired layout.
I've been working on it in VSCode and I've managed to make it look the way I desire (see img below).
my issue comes when this get rendered inside WP, for some reason the boxes do not expand to fit the size of the grid layout creating some weird gaps in the content. (see below)
I used the grid overlay and I noticed that the grid is the right size, is just that the box is not expanding properly.
I'm not really sure what the issue is here, I have tried adjusting the layout, the padding, etc.
HTML
main{
width: 100vw;
display: flex;
justify-content: space-around
}
.grid-section{
width: 100%;
max-width: 960px;
height: 100vh;
max-height: 250px;
background: #313131;
color: rgb(211, 168, 168);
font-size: 15px;
overflow:hidden;
border-radius: 10px;
display: flex;
justify-content: space-around
}
#grid{
display: grid;
grid-template-columns: repeat(32, 1fr);
grid-template-rows: 12% 44% 44% 0%
}
.box {
display: flex;
flex-basis: 100%;
}
/*top*/
.box:nth-child(1){
background: #9dcbe9;
grid-column: 1/33;
grid-row: 1/2;
padding: 5px;
}
/*left*/
.box:nth-child(2){
background: #eed875;
grid-column: 1/6;
grid-row: 2/4;
}
/*right*/
.box:nth-child(3){
background: #c97eec;
grid-column:28/33;
grid-row: 2/4;
}
/*middle long*/
.box:nth-child(4){
background: #9de99d;
grid-column: 6/28;
grid-row: 2/3;
}
/*mini boxes*/
.box:nth-child(5){
background: #ffa569;
grid-column: 6/9;
grid-row: 3/4;
}
.box:nth-child(6){
background: #584905;
grid-column: 9/14;
grid-row: 3/4;
}
.box:nth-child(7){
background: #560b79;
grid-column: 14/17;
grid-row: 3/4;
}
.box:nth-child(8){
background: #00ff00;
grid-column: 17/20;
grid-row: 3/4;
}
.box:nth-child(9){
background: #0a9ed8;
grid-column: 20/23;
grid-row: 3/4;
}
.box:nth-child(10){
background: #5802e2;
grid-column: 23/28;
grid-row: 3/4;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<title> flexBox testing</title>
<body>
<main>
<div id="grid" class="grid-section">
<div class="box">
<div class="box-content">n1</div>
</div>
<div class="box">
<div class="box-content">n2</div>
</div>
<div class="box">
<div class="box-content">n3</div>
</div>
<div class="box">
<div class="box-content">n4</div>
</div>
<div class="box">
<div class="box-content">n5</div>
</div>
<div class="box">
<div class="box-content">n6</div>
</div>
<div class="box">
<div class="box-content">n7</div>
</div>
<div class="box">
<div class="box-content">n8</div>
</div>
<div class="box">
<div class="box-content">n9</div>
</div>
<div class="box">
<div class="box-content">n10</div>
</div>
</div>
</main>
</body>
Thanks in advance
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 0.5rem;
grid-row-gap: 0.5rem;
padding: 10px;
}
.grid-item {
background-color: #999;
border: 1px solid #fff;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
Related
I'm trying to make an "example page" of all the layouts (so one under the other) How do I place a grid wrapper under a flex container and not be shown in the same line? if I remove the display: flex it automatically goes under but flex remains in the same line.
And why do they both have the same salmon background color?
Thanks.
.flex-wrapper {
display: flex;
border: 5px solid rgb(0, 0, 0);
}
.flex-wrapper>div {
padding: 20px;
margin: 5px;
background-color: salmon;
}
/* grid */
.grid-wrapper {
display: grid;
border: 5px solid purple;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 10px;
}
.grid-wrapper>div {
padding: 20px;
margin: 5px;
border-radius: 5px;
background-color: aquamarine;
}
.box1 {
grid-column: 2 / 4;
grid-row: 1;
}
.box2 {
grid-column: 1;
grid-row: 1 / 3;
}
.box3 {
grid-row: 2;
grid-column: 3;
}
<h1>Flexbox Layout</h1>
<div class="flex-wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<!--Grid-->
<div class="grid-wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<div class="box4">Four</div>
<div class="box5">Five</div>
<div class="box6">Six</div>
</div>
</div>
Just wrap the boxes of box in a container and put the add a flex-direction to column property in your flex-wrapper css class selector
.flex-wrapper {
display: flex;
flex-direction: column;
border: 5px solid rgb(0, 0, 0);
}
.flex-wrapper .box-container > div {
padding: 20px;
margin: 5px;
background-color: salmon;
}
/* grid */
.grid-wrapper {
display: grid;
border: 5px solid purple;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 10px;
}
.grid-wrapper>div {
padding: 20px;
margin: 5px;
border-radius: 5px;
background-color: aquamarine;
}
.box1 {
grid-column: 2 / 4;
grid-row: 1;
}
.box2 {
grid-column: 1;
grid-row: 1 / 3;
}
.box3 {
grid-row: 2;
grid-column: 3;
}
<h1>Flexbox Layout</h1>
<div class="flex-wrapper">
<div class="box-container">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
</div>
<!--Grid-->
<div class="grid-wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<div class="box4">Four</div>
<div class="box5">Five</div>
<div class="box6">Six</div>
</div>
</div>
why do they both have the same salmon background color?
Because .flex-wrapper > div applies to every div that's an immediate child of flex-wrapper.
How do I place a grid wrapper under a flex container and not be shown in the same line?
You could add a flex-wrap rule to your flex-wrapper and set the grid item to be wide enough to wrap, as in the example below, but you might consider whether your outer container should be a grid instead of flex. You'd have more control that way.
.flex-wrapper {
display: flex;
border: 5px solid rgb(0, 0, 0);
flex-wrap: wrap; /* <=== */
}
.flex-wrapper>div {
padding: 20px;
margin: 5px;
background-color: salmon;
}
/* grid */
.grid-wrapper {
display: grid;
border: 5px solid purple;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 10px;
flex: 1 1 100%; /* <=== */
}
.grid-wrapper>div {
padding: 20px;
margin: 5px;
border-radius: 5px;
background-color: aquamarine;
}
.box1 {
grid-column: 2 / 4;
grid-row: 1;
}
.box2 {
grid-column: 1;
grid-row: 1 / 3;
}
.box3 {
grid-row: 2;
grid-column: 3;
}
<h1>Flexbox Layout</h1>
<div class="flex-wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<!--Grid-->
<div class="grid-wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<div class="box4">Four</div>
<div class="box5">Five</div>
<div class="box6">Six</div>
</div>
</div>
.main-dev {
display: grid;
grid-template-columns: 50% 50%;
}
I want to arrange my grid into 50% 50% and 100% structures. I have attached the required output image.
Current output :
Expected Output :
.item {
border: 1px solid red;
text-align: center;
padding: 10px;
}
.main-dev {
display: grid;
grid-template-columns: 1fr 1fr;
width: 200px;
border: solid red 1px;
}
.item3 {
grid-column: 1 / 3;
/* or grid-column: 1 / span 2 */
}
<div class="main-dev">
<div class="item">1</div>
<div class="item">2</div>
<div class="item item3">3</div>
You can try this,
.item3 {
grid-column-start: 1;
grid-column-end: 3;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>
So. Let's imagine you have 3 items with class names item1, item2, item3.
Here is the style for them:
.item1 { grid-area: item1; }
.item2 { grid-area: item2; }
.item3 { grid-area: item3; }
div{
display: grid;
grid-template-areas:
'item1 item2'
'item3 item3'
grid-gap: 10px;}
First of all, you can use col-. Here is my example:
.red{
border: 1px solid red;
height:200px;
}
.col-6{
float:left;
width:50%;
}
.col-12{
float:left;
width:100%;
}
<body>
<div class="col-6">
<div class="red"></div>
</div>
<div class="col-6">
<div class="red"></div>
</div>
<div class="col-12">
<div class="red"></div>
</div>
</body>
And you can modify the code as you like.
I'm trying to make a layout like this:
Here's my code:
.grid{
display: grid;
background: gray;
grid-gap: 15px;
justify-content: center
align-items: center;
grid-template-columns: repeat(2, auto);
grid-auto-rows: minmax(50px, auto);
}
.sidebar{
grid-column: 1/2;
background-color: white;
align-items: center;
justify-content: center;
width: 300px;
}
.navbar{
grid-column: 2/3;
background-color: white;
height: 50px;
}
.section2{
grid-column: 2/3;
background-color: white;
height: 300px;
}
.section4{
grid-column: 2/3;
background-color: white;
height: 300px;
}
.section3{
grid-column: 1/2;
background-color: white;
height: 200px;
align-items: center;
width: 300px;
}
.section5{
grid-column: 1/2;
background-color: white;
height: 100px;
align-items: center;
width: 300px;
}
<div class="grid">
<div class="sidebar">sidebar</div>
<div class="navbar">navbar</div>
<div class="section2">section2</div>
<div class="section3">section3</div>
<div class="section4">section4</div>
<div class="section5">section5</div>
</div>
The output is shown here:
I highlighted in red some big problems, I have these massive gaps in between sections, and my columns aren't being centered in the grid I tried adding "justify-content: center" and "align-items: center" but none of those centered the sidebar sections and I have no clue how to reduce the gap in between the sections. How can I fix my code so it looks more like the layout in my mockup?
It's complicated because with CSS Grid you have a grid...
For your layout you must divide them on two sections like this:
<div class="grid">
<div class="left">
<aside class="sidebar">sidebar</aside>
<section class="section2">section2</section>
<section class="section4">section4</section>
</div>
<div class="right">
<nav class="navbar">navbar</nav>
<section class="section3">section3</section>
<section class="section5">section5</section>
</div>
</div>
https://codepen.io/tasmim-concept/pen/mdrxLOR
I am trying to create four evenly spaced squares displayed in a square pattern (two on top, two on bottom), and centered on the page, much like this:
I have tried to do this in a css grid but when the grid fr get too big the divs stay on the right side of the fr and space the two columns farther apart, regardless of the browser width, like this:
I'd like to shift the Idaho and Nevada divs to the right side of the fr so all four divs are the same distance apart.
Here is my code so far:
Thank you!
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
}
.idaho {
grid-column: 2/3;
grid-row: 1/2;
height: 300px;
width: 300px;
background-color: gray;
}
.utah {
grid-column: 3/4;
grid-row: 1/2;
height: 300px;
width: 300px;
background-color: gray;
}
.nevada {
grid-column: 2/3;
grid-row: 2/3;
height: 300px;
width: 300px;
background-color: gray;
}
.arizona {
grid-column: 3/4;
grid-row: 2/3;
height: 300px;
width: 300px;
background-color: gray;
}
<div class="grid">
<div class="idaho">
<h2>Idaho</h2>
</div>
<div class="utah">
<h2>Utah</h2>
</div>
<div class="nevada">
<h2>Nevada</h2>
</div>
<div class="arizona">
<h2>Arizona</h2>
</div>
</div>
grid-template-columns
Instead of this:
grid-template-columns: 1fr 1fr 1fr 1fr
Use this:
grid-template-columns: 1fr auto auto 1fr
.grid {
display: grid;
grid-template-columns: 1fr auto auto 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
}
.idaho {
grid-column: 2/3;
grid-row: 1/2;
height: 300px;
width: 300px;
background-color: gray;
}
.utah {
grid-column: 3/4;
grid-row: 1/2;
height: 300px;
width: 300px;
background-color: gray;
}
.nevada {
grid-column: 2/3;
grid-row: 2/3;
height: 300px;
width: 300px;
background-color: gray;
}
.arizona {
grid-column: 3/4;
grid-row: 2/3;
height: 300px;
width: 300px;
background-color: gray;
}
<div class="grid">
<div class="idaho">
<h2>Idaho</h2>
</div>
<div class="utah">
<h2>Utah</h2>
</div>
<div class="nevada">
<h2>Nevada</h2>
</div>
<div class="arizona">
<h2>Arizona</h2>
</div>
</div>
When you set the four columns to 1fr, you are distributing container space equally among all columns. As you widen the screen, the columns will expand in equal proportion, creating wider columns than the size of the squares.
When you set the inner columns to auto, they are sized to the content width. Then you can use 1fr on the outer columns to consume all free space from opposite directions, pinning the inner columns to the center at all times.
justify-self: end
You can also keep the original grid-template-columns and add justify-self: end to the left-side squares to get them to shift right inside the column.
.grid {
display: grid;
grid-template-columns: 1fr auto auto 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
}
.idaho {
grid-column: 2/3;
grid-row: 1/2;
height: 300px;
width: 300px;
background-color: gray;
justify-self: end; /* new */
}
.utah {
grid-column: 3/4;
grid-row: 1/2;
height: 300px;
width: 300px;
background-color: gray;
}
.nevada {
grid-column: 2/3;
grid-row: 2/3;
height: 300px;
width: 300px;
background-color: gray;
justify-self: end; /* new */
}
.arizona {
grid-column: 3/4;
grid-row: 2/3;
height: 300px;
width: 300px;
background-color: gray;
}
<div class="grid">
<div class="idaho">
<h2>Idaho</h2>
</div>
<div class="utah">
<h2>Utah</h2>
</div>
<div class="nevada">
<h2>Nevada</h2>
</div>
<div class="arizona">
<h2>Arizona</h2>
</div>
</div>
For more about justify-self see:
The difference between justify-self, justify-items and justify-content in CSS Grid
use flexbox for this kind of thing. Makes it a lot easier.
.container{
display:flex;
justify-content:space-evenly;
height:100vh;
}
.left,.right{
display:flex;
flex-direction:column;
justify-content:space-evenly;
}
.box{
height:200px;
width:300px;
border:solid 1px black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example 2</title>
<link rel="stylesheet" type="text/css" href="styles/example2.css" />
</head>
<body>
<div class="container">
<div class='left'>
<div class="box">
<h2>Idaho</h2>
</div>
<div class="box">
<h2>Nevada</h2>
</div>
</div>
<div class='right'>
<div class="box">
<h2>Utah</h2>
</div>
<div class="box">
<h2>Arizona</h2>
</div>
</div>
</div>
</body>
</html>
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
}
.idaho {
grid-column: 2/3;
grid-row: 1/2;
height: 300px;
width: 300px;
background-color: gray;
}
.utah {
grid-column: 3/4;
grid-row: 1/2;
height: 300px;
width: 300px;
background-color: gray;
}
.nevada {
grid-column: 2/3;
grid-row: 2/3;
height: 300px;
width: 300px;
background-color: gray;
}
.arizona {
grid-column: 3/4;
grid-row: 2/3;
height: 300px;
width: 300px;
background-color: gray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example 2</title>
<link rel="stylesheet" type="text/css" href="styles/example2.css" />
</head>
<body>
<div class="grid">
<div class="idaho">
<h2>Idaho</h2>
</div>
<div class="utah">
<h2>Utah</h2>
</div>
<div class="nevada">
<h2>Nevada</h2>
</div>
<div class="arizona">
<h2>Arizona</h2>
</div>
</div>
</body>
</html>
I'm working on a assignment in which I want to make two groups of css-grids mixed with each other like this:
I'm using the following code
.group1 .item1 {
grid-column: 1 / 4;
}
.group1 .item2 {
grid-column: 1;
}
.group1 .item3 {
grid-column: 2 / 4;
}
.group2 .item4 {
grid-column: 2 / 3;
}
.group2 .item5 {
grid-column: 3 / 4;
}
.group2 .item6 {
grid-column: 2 / 4;
}
.container {
display: grid;
grid-gap: 5px;
max-width: 1200px;
margin: 0 auto 100px auto;
border: 8px dashed #999;
}
<section class="part5 container">
<div class="container group1">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
</div>
<div class="container group2">
<div class="item item4">Item 4</div>
<div class="item item5">Item 5</div>
<div class="item item6">Item 6</div>
</div>
</section>
I'm expecting the output to be like the [image] attached WITHOUT CHANGING HTML but I'm unable to get that output, please help me, I shall be very thankful to you for this act of kindness.
You could use display:contents to avoid the subcontainers to come in the way and use display grid and grid-area (grid-row/grid-column) to dispatch your elements.
But this is not yet working everywhere !
Demo of the idea
.part5 {
display: grid;
grid-template-colums: repeat(6, 1fr);
min-height: 100vh
}
.container.group1,
.container.group2 {
display: contents;
}
.item1 {
grid-column: 1/ span 6;
grid-row: 1;
border: solid;
color: tomato;
}
.item2 {
grid-row: 2 /span 3;
grid-column: 1 /span 2;
border: solid;
color: turquoise;
}
.item3 {
grid-row: 2;
grid-column: 3/span 4;
border: solid;
color: green;
}
.item4 {
grid-row: 3;
grid-column: 3 /span 2;
border: solid;
}
.item5 {
grid-row: 3;
grid-column: 5 / span 2;
border: solid;
color: brown;
}
.item6 {
grid-row: 4;
grid-column: 3 / span 4;
border: solid;
color: purple;
}
/* demo*/
* {
margin: 0;
}
[class^=item] {
display: flex;
align-items: center;
justify-content: center;
font-size: calc(2vh + 2vw)
}
<section class="part5 container">
<div class="container group1">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
</div>
<div class="container group2">
<div class="item item4">Item 4</div>
<div class="item item5">Item 5</div>
<div class="item item6">Item 6</div>
</div>
</section>
https://css-tricks.com/get-ready-for-display-contents/
—a magical new display value that essentially makes the container disappear, making the child elements children of the element the next level up in the DOM.
from your code, it could be a short code update :
/*update */
.container {
display: contents
}
.part5 {
/* end update */
display: grid;
grid-gap: 5px;
max-width: 1200px;
margin: 0 auto 100px auto;
border: 8px dashed #999;
}
.group1 .item1 {
grid-column: 1 / 4;
}
.group1 .item2 {
grid-column: 1;
grid-row: 2/5;
}
.group1 .item3 {
grid-column: 2 / 4;
}
.group2 .item4 {
grid-column: 2 / 3;
}
.group2 .item5 {
grid-column: 3 / 4;
}
.group2 .item6 {
grid-column: 2 / 4;
}
.container {
display: contents
}
.part5 {
display: grid;
grid-gap: 5px;
max-width: 1200px;
margin: 0 auto 100px auto;
border: 8px dashed #999;
}
/*demo*/
div {
box-shadow: 0 0 0 2px lightgray;
<section class="part5 container">
<div class="container group1">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
</div>
<div class="container group2">
<div class="item item4">Item 4</div>
<div class="item item5">Item 5</div>
<div class="item item6">Item 6</div>
</div>
</section>
The rough way is to set both groups on the same grid overlapping them :
.container {
display: grid;
width: 100%;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 1fr);
}
.group1 {
grid-row: 1 / span 4;
grid-column: 1 / span 6;
}
.group2 {
grid-template-rows: repeat(2, 1fr);
grid-column: 3 /span 4;
grid-row: 3 /span 3;
}
.item1 {
grid-column: 1 / span 6;
color: tomato;
}
.item2 {
grid-column: 1 / span 2;
grid-row: 2 / span 4;
color: turquoise;
}
.item3 {
grid-column: 3 / span 4;
color: green;
}
.item4 {
grid-column: 1 /span 3;
grid-row: 1;
}
.item5 {
grid-column: 4/span 3;
color: brown;
}
.item6 {
grid-column: 1/ span 6;
color: purple;
}
/* demo*/
[class^=item] {
border: solid;
display: flex;
align-items: center;
justify-content: center;
font-size: calc(2vh + 2vw);
background: lightgray;
min-height:20vh
}
<section class="part5 container">
<div class="container group1">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
</div>
<div class="container group2">
<div class="item item4">Item 4</div>
<div class="item item5">Item 5</div>
<div class="item item6">Item 6</div>
</div>
</section
.container{
display: grid;
grid-template-columns: repeat(6,auto);
grid-gap: 5px;
grid-template-areas:
'item1 item1 item1 item1 item1 item1'
'item2 item2 item3 item3 item3 item3'
'item2 item2 item3 item3 item3 item3'
'item2 item2 item4 item4 item5 item5'
'item2 item2 item4 item4 item5 item5'
'item2 item2 item6 item6 item6 item6'
;
}
.box{
border: 2px solid black;
background-color: lightblue;
padding: 10px;
border-radius: 12px;
text-align: center;
}
#item1{
grid-area: item1;
}
#item2{
grid-area: item2;
}
#item3{
grid-area: item3;
}
#item4{
grid-area: item4;
}
#item5{
grid-area: item5;
}
#item6{
grid-area: item6;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="box" id="item1">item-1</div>
<div class="box" id="item2">item-2</div>
<div class="box" id="item3">item-3</div>
<div class="box" id="item4">item-4</div>
<div class="box" id="item5">item-5</div>
<div class="box" id="item6">item-6</div>
</div>
</body>
</html>
display: subgrid
A clean and efficient way to solve this problem would be to use display: subgrid, which is a CSS Grid feature designed specifically for these sorts of layouts. Subgrids allow nested grid containers to recognize the grid lines of the primary grid container.
Unfortunately, this feature is not available yet. More details here:
Positioning content of grid items in primary container (subgrid feature)
grid-template-areas
Another clean and efficient way to solve the problem would be to make the primary container (.part5.container) a grid container, then arrange both child containers in the shape that you need using grid-template-areas.
Unfortunately, this feature is also not available yet. More details here:
grid-template-areas with ASCII art is not working
A possible solution
So here's a solution using CSS Grids and (to compensate for the missing features listed above) a little bit of absolute positioning. No changes to the HTML.
.part5.container {
display: grid;
border: 8px dashed #999;
height: 100vh;
grid-template-rows: auto auto;
grid-template-columns: 35% 1fr;
grid-template-areas: " group1 group1 "
" . group2 ";
}
.container.group1 {
grid-area: group1;
display: grid;
grid-template-rows: 50px 1fr;
grid-template-columns: 35% 1fr;
grid-gap: 5px;
position: relative;
}
.item1 {
grid-column: 1 / -1;
}
.item2 {
position: absolute;
top: 55px; /* top row height plus gap */
width: 35%; /* first column width */
height: calc(100vh - 71px); /* minus height of top row (50px) plus borders (16px)) */
}
.item3 {
grid-column: 2;
}
.container.group2 {
grid-area: group2;
display: grid;
grid-template-rows: 1fr 50px;
grid-template-columns: 1fr 1fr;
grid-gap: 5px;
margin: 5px 0 0 5px;
}
.item6 {
grid-column: 1 / -1;
}
.item {
background-color: lightgreen;
display: flex;
align-items: center;
justify-content: center;
}
body {
margin: 0;
}
* {
box-sizing: border-box;
}
<section class="part5 container">
<div class="container group1">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
</div>
<div class="container group2">
<div class="item item4">Item 4</div>
<div class="item item5">Item 5</div>
<div class="item item6">Item 6</div>
</div>
</section>