不嵌套的多行CSS网格

Question

例如，请参见 PEN

我有6个菜单项，我想实现这种grid布局而不嵌套。 我是CSS grid的新手，我认为使用CSS grid将是实现设计目标的最佳方法。

这是我到目前为止所做的。

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">
        <a href="#" class="mainmenu__item">Menu 1</a>
      </div>
    </div>
  </li>
  <li class="menu__item menu__item--2">
    <div class="menu-item-inner">
      <div class="mainmenu">
        <a href="#" class="mainmenu__item">Menu 2</a>
      </div>
    </div>
  </li>
  <li class="menu__item menu__item--3">
    <div class="menu-item-inner">
      <div class="mainmenu">
        <a href="#" class="mainmenu__item">Menu 3</a>
      </div>
    </div>
  </li>
  <li class="menu__item menu__item--4">
    <div class="menu-item-inner">
      <div class="mainmenu">
        <a href="#" class="mainmenu__item">Menu 4</a>
      </div>
    </div>
  </li>
  <li class="menu__item menu__item--5">
    <div class="menu-item-inner">
      <div class="mainmenu">
        <a href="#" class="mainmenu__item">Menu 5</a>
      </div>
    </div>
  </li>
  <li class="menu__item menu__item--6">
    <div class="menu-item-inner">
      <div class="mainmenu">
        <a href="#" class="mainmenu__item">Menu 6</a>
      </div>
    </div>
  </li>
  
</ul>

CODPEN

  

任何人都可以指导我使用CSS-Grid而不嵌套的实现此布局   （更改视觉顺序，而无需更改   文档）

Answer 1

如果您想要复杂的布局，可以使用grid-template-areas：

* {
  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>