Tailwind Flexbox 网格布局

Question

我正在尝试学习如何使用 Tailwind Flexbox Grids 构建网站布局，因为我认为这很有价值。我有一些问题：

1. 如何构建这样的布局？ The layout 使用 Flexbox 网格？特别是侧边栏部分？想不通。做一些比只有一堆相互重叠的行更复杂的事情似乎很棘手？

除此之外，我如何进一步开发它？一堆行？

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.2.0/tailwind.min.css" rel="stylesheet" />

<div>
  <div class="flex">
    <div class="w-1/4 bg-gray-400 text-center h-32">
      <button>SAVE</button>
    </div>
    <div class="w-1/4 bg-gray-500">1</div>
    <div class="w-1/4 bg-gray-600">1</div>
    <div class="w-1/4 bg-gray-700">1</div>
  </div>
  <div class="flex">
    <div class="w-1/4 bg-gray-400 text-center h-32">
      <button>SAVE</button>
    </div>
    <div class="w-1/4 bg-gray-500">1</div>
    <div class="w-1/4 bg-gray-600">1</div>
    <div class="w-1/4 bg-gray-700">1</div>
  </div>
  <div class="flex">
    <div class="w-1/4 bg-gray-400 text-center h-32">
      <button>SAVE</button>
    </div>
    <div class="w-1/4 bg-gray-500">1</div>
    <div class="w-1/4 bg-gray-600">1</div>
    <div class="w-1/4 bg-gray-700">1</div>
  </div>
  <div class="flex">
    <div class="w-1/4 bg-gray-400 text-center h-32">
      <button>SAVE</button>
    </div>
    <div class="w-1/4 bg-gray-500">1</div>
    <div class="w-1/4 bg-gray-600">1</div>
    <div class="w-1/4 bg-gray-700">1</div>
  </div>
</div>

Answer 1

顺风

你可以用 tailwind/flex 来完成这个，但我不推荐它。

/* Demo Only CSS */

div {
  border: 1px solid black;
  text-align: center;
  padding: 10px;
  background-color: rgba(0, 0, 0, .1);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.2.0/tailwind.min.css" rel="stylesheet" />

<div class="min-h-screen flex flex-col">
  <div class="flex h-32">
    <div class="w-full">1</div>
  </div>
  <div class="flex flex-1">
    <div class="w-1/4">2</div>
    <div class="flex-1">
      <div class="flex flex-col h-full">
        <div class="h-32">3</div>
        <div class="flex h-32">
          <div class="w-1/2">4</div>
          <div class="w-1/2">5</div>
        </div>
        <div class="flex-1">6</div>
      </div>
    </div>
  </div>
</div>

从演示中可以看出，这需要大量嵌套的 html 标签。

幸运的是，有更好的方法！

CSS 网格

grid-template 使这变得更容易。它也更加灵活！

.grid-container {
  display: grid;
  grid-template:
    'header header header'
    'sidebar heading heading'
    'sidebar col-left col-right'
    'sidebar body body';
}

.header{
  grid-area: header;
}
.sidebar{
  grid-area: sidebar;
}
.heading{
  grid-area: heading;
}
.col-left{
  grid-area: col-left;
}
.col-right{
  grid-area: col-right;
}
.body{
  grid-area: body;
}



/* Demo Only CSS */
div {
 border: 1px solid black;
 padding: 10px;
 text-align: center;
}

<div class="grid-container">
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="heading">heading</div>
  <div class="col-left">col-left</div>
  <div class="col-right">col-right</div>
  <div class="body">body</div>
</div>