Talwind Flexbox Grid Layout

user_13072900 0
Viewed 3049

Im trying to learn how to build website layouts using Tailwind Flexbox Grids as i think it would be valuable. I got some questions:

  1. How do one build a layout like this? The layout using Flexbox grids? Espacially, the sidebar part? Cannot figure it out. Seems tricky to do something more complicated than only a bunch of rows on top off each others?

How do i develop it further than just this? a bunch of rows?

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

tailwind-css vue.js css html
1 Answers

Tailwind

You can accomplish this with tailwind/ flex, but I would not recommend it.

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

As you can see from the demo, this requires an overwhelming amount of nested html tags.

Luckily, there is a better way!

CSS Grid

grid-template makes this much easier. It's also way more flexible!

.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>

user_51445790
Related