Multi row CSS grid without nesting - html

Question

FOR EXAMPLE, SEE THIS PEN
I have 6 menu items and I want to achieve this grid layout without nesting. I'm a newbie in CSS grid and I thought using the CSS grid will be the best way to achieve what in the design.
This is what I have done so far.
ul {
list-style: none;
padding-left: 0;
}
.menu-items {
text-align: center;
display: grid;
grid-template-columns: 100%;
grid-template-rows: repeat(3, 33.33%);
}
.menu-items {
width: 100%;
height: 100vh;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50% 50%;
grid-template-areas: "item1 item2" "item3 item4";
}
.menu__item {
height: 100%;
background: #212528;
border: 1px solid #333;
display: flex;
justify-content: center;
align-items: center;
}
.menu__item--1 {
grid-area: item1;
}
.menu__item--2 {
grid-area: item2;
}
.menu__item--3 {
grid-area: item3;
}
.menu__item--4 {
grid-area: item3;
}
.menu__item--5 {
grid-area: item3;
}
.menu__item--6 {
grid-area: item4;
}
.menu__item--3,
.menu__item--4,
.menu__item--5 {
display: block;
}
.menu-item-inner {
align-items: center;
}
.mainmenu {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mainmenu {
counter-reset: menuitem;
}
.mainmenu__item {
text-transform: lowercase;
overflow: visible;
margin: 0.5rem 0;
padding: 0 0.5rem;
position: relative;
transition: color 0.3s;
}
.mainmenu__item:hover {
color: cyan;
}
.mainmenu__item:hover::after {
opacity: 1;
transform: scale3d(1, 1, 1);
}
ul.menu-items {
margin: 0;
padding: 0;
}
.mainmenu__item {
position: relative;
overflow: hidden;
transition: color 0.1s;
margin: 0.25rem 0;
display: block;
color: #fff;
font-size: 32px;
font-weight: 800;
}
<ul class="menu-items">
<li class="menu__item menu__item--1">
<div class="menu-item-inner">
<div class="mainmenu">
Menu 1
</div>
</div>
</li>
<li class="menu__item menu__item--2">
<div class="menu-item-inner">
<div class="mainmenu">
Menu 2
</div>
</div>
</li>
<li class="menu__item menu__item--3">
<div class="menu-item-inner">
<div class="mainmenu">
Menu 3
</div>
</div>
</li>
<li class="menu__item menu__item--4">
<div class="menu-item-inner">
<div class="mainmenu">
Menu 4
</div>
</div>
</li>
<li class="menu__item menu__item--5">
<div class="menu-item-inner">
<div class="mainmenu">
Menu 5
</div>
</div>
</li>
<li class="menu__item menu__item--6">
<div class="menu-item-inner">
<div class="mainmenu">
Menu 6
</div>
</div>
</li>
</ul>
CODPEN
Can anyone please guide me achieving this layout using CSS-Grid without nesting
(Changing the visual order without changing the logical order of the
document)

Answer 1

You can use grid-template-areas if you want complex layout:
* {
box-sizing: border-box;
}
body {
margin: 0;
display: flex;
align-items: center;
justify-content:center;
height: 100vh;
min-height: 600px;
}
.box {
display: flex;
align-items: center;
justify-content:center;
border: 1px solid #333;
background: #444;
color: #f9f9f9;
font-size: 2rem;
font-family: Open-sans, Arial, sans-serif;
}
.container {
width: 800px;
height: 100%;
display: grid;
padding: .5rem;
grid-gap: .5rem;
/* This is where Grid is defined*/
grid-template-areas:
'box-1 box-1 box-2 box-2'
'box-1 box-1 box-2 box-2'
'box-3 box-5 box-6 box-6'
'box-4 box-5 box-6 box-6';
}
.box-1 {
grid-area: box-1;
}
.box-2 {
grid-area: box-2;
}
.box-3 {
grid-area: box-3;
}
.box-4 {
grid-area: box-4;
}
.box-5 {
grid-area: box-5;
}
.box-6 {
grid-area: box-6;
}
<div class="container">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
<div class="box box-5">5</div>
<div class="box box-6">6</div>
</div>