Talwind Flexbox Grid Layout

Question

Я пытаюсь научиться создавать макеты сайтов, используя Tailwind Flexbox Grids, так как я думаю, что это было бы полезно. У меня есть несколько вопросов:

1. Как создать такой макет? Макет с использованием сетки 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

Попутный ветер

Вы можете сделать это sh с помощью попутного ветра / флекса, но я бы не советовал.

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