Tailwind Tutorial: Laying it Out with Flex and Grid

Here are ten exercises you can try with Tailwind CSS layout using Flexbox and ddgrid. I have all the problems listed here before you reach the solution for you to try them out before reading my solutions! Good luck and comment successes below.

Exercises

1. Create a simple two-column layout using flexbox, with a sidebar on the left and main content on the right.

2. Build a responsive three-column layout using grid, with equal-width columns on desktop and mobile views, but stacked on smaller screens.

3. Use flexbox to create a horizontal navigation menu with evenly spaced items, and add a dropdown menu for smaller screens.

4. Build a vertical timeline using flexbox, with each event in a separate box and connecting lines between them.

5. Create a responsive grid of cards using grid, with each card showing an image and some text.

6. Build a footer with links and social icons using flexbox, with the links aligned to the left and the icons to the right.

7. Use grid to create a complex layout with a header, two sidebars, and a main content area.

8. Create a responsive grid of product listings using grid, with each listing showing an image, title, and price.

9. Build a sticky navbar using flexbox, which stays fixed to the top of the page as the user scrolls down.

10. Use grid to create a responsive gallery layout with images of varying sizes, which aligns them in a way that minimizes whitespace.

Solutions

Here are the code examples for each of the 10 exercises I suggested earlier, using Tailwind CSS and either flexbox or grid.

Here are the Tailwind classes and their equivalent CSS styles for each code example:

Exercise 1: Simple two-column layout using flexbox

<div class="flex">
  <div class="w-1/4 bg-gray-200">
    <!-- Sidebar content -->
  </div>
  <div class="w-3/4 bg-gray-100">
    <!-- Main content -->
  </div>
</div>

Tailwind classes used:

• flex: sets the display property of the parent element to flex

• w-1/4: sets the width of the sidebar to 25% of the parent element's width

• bg-gray-200: sets the background color of the sidebar to gray-200

• w-3/4: sets the width of the main content to 75% of the parent element's width

• bg-gray-100: sets the background color of the main content to gray-100

Equivalent CSS styles:

.flex {
  display: flex;
}

.w-1/4 {
  width: 25%;
}

.bg-gray-200 {
  background-color: #EDF2F7;
}

.w-3/4 {
  width: 75%;
}

.bg-gray-100 {
  background-color: #F7FAFC;
}

Exercise 2: Responsive three-column layout using grid

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
  <div class="bg-gray-100">
    <!-- Column 1 content -->
  </div>
  <div class="bg-gray-200">
    <!-- Column 2 content -->
  </div>
  <div class="bg-gray-300">
    <!-- Column 3 content -->
  </div>
</div>

Tailwind classes used:

• grid: sets the display property of the parent element to grid

• grid-cols-1: sets the parent element to have one column by default

• sm:grid-cols-2: sets the parent element to have two columns on small screens and up

• lg:grid-cols-3: sets the parent element to have three columns on large screens and up

• bg-gray-100: sets the background color of the first child element to gray-100

• bg-gray-200: sets the background color of the second child element to gray-200

• bg-gray-300: sets the background color of the third child element to gray-300

Equivalent CSS styles:

.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.sm\:grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lg\:grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bg-gray-100 {
  background-color: #F7FAFC;
}

.bg-gray-200 {
  background-color: #EDF2F7;
}

.bg-gray-300 {
  background-color: #E2E8F0;
}

Exercise 3: Horizontal navigation menu with dropdown using flexbox

<nav class="flex justify-between items-center">
  <ul class="flex">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <ul class="hidden sm:flex">
    <li><a href="#">Dropdown</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">Items</a></li>
  </ul>
</nav>

In this example, we're using flexbox to create a horizontal navigation menu with a dropdown menu that's visible only on small screens and up.

• The flex class on the parent nav sets its display property to flex.

• The justify-between class on the parent nav sets the horizontal alignment of its children to be distributed evenly with space between.

• The items-center class on the parent nav sets the vertical alignment of its children to be centered.

• The flex class on the first child ul sets its display property to flex.

• The hidden and sm:flex classes on the second child ul sets it to be hidden on small screens and visible on larger screens.

• The li and a elements create the menu items and dropdown items respectively.

Tailwind classes used:

• flex: sets the display property of the element to flex

• justify-between: aligns the children elements horizontally and distributes the space evenly with space between

• items-center: aligns the children elements vertically and centers them

• hidden: sets the element to be hidden

• sm:flex: sets the element to be visible on small screens and up

Equivalent CSS styles:

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul:first-child {
  display: flex;
}

nav ul:last-child {
  display: none;
}

@media (min-width: 640px) {
  nav ul:last-child {
    display: flex;
  }
}

Exercise 4: Vertical timeline using flexbox

<div class="flex flex-col">
  <div class="flex items-center">
    <div class="h-1 bg-gray-500 flex-1"></div>
    <div class="w-6 h-6 bg-gray-500 rounded-full"></div>
    <div class="h-1 bg-gray-500 flex-1"></div>
  </div>
  <div class="flex items-center mt-8">
    <div class="h-1 bg-gray-500 flex-1"></div>
    <div class="w-6 h-6 bg-gray-500 rounded-full"></div>
    <div class="h-1 bg-gray-500 flex-1"></div>
  </div>
  <!-- More events here -->
</div>

In this example, we're using flexbox to create a vertical timeline with dots and horizontal lines.

• The flex class on the parent div sets its display property to flex.

• The flex-col class on the parent div sets its flex direction to column.

• The flex class on the child divs sets their display property to flex.

• The items-center class on the child divs sets their vertical alignment to be centered.

• The `hflex: sets the display property of the element to flex

• flex-col: sets the flex-direction property of the element to column

• items-center: aligns the children elements vertically and centers them

• h-1: sets the height of the element to 1 rem

• w-6: sets the width of the element to 1.5 rem

• bg-gray-500: sets the background color of the element to gray-500

• flex-1: sets the flex-grow, flex-shrink, and flex-basis properties of the element to 1

Equivalent CSS styles:

div {
  display: flex;
  flex-direction: column;
}

div > div {
  display: flex;
  align-items: center;
}

div > div > div:first-child, div > div > div:last-child {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  height: 1rem;
  background-color: #718096;
}

div > div > div:nth-child(2) {
  width: 1.5rem;
  height: 1.5rem;
  background-color: #718096;
  border-radius: 50%;
}

Exercise 5: Vertical centering of a single element using flexbox

<div class="flex items-center justify-center h-screen">
  <h1 class="text-3xl font-bold text-gray-800">Hello, world!</h1>
</div>

In this example, we're using flexbox to center a single element vertically and horizontally in the viewport.

• The flex class on the parent div sets its display property to flex.

• The items-center class on the parent div sets the vertical alignment of its children to be centered.

• The justify-center class on the parent div sets the horizontal alignment of its children to be centered.

• The h-screen class on the parent div sets its height to the full viewport height.

Tailwind classes used:

• flex: sets the display property of the element to flex

• items-center: aligns the children elements vertically and centers them

• justify-center: aligns the children elements horizontally and centers them

• h-screen: sets the height of the element to the full viewport height

Equivalent CSS styles:

div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

h1 {
  font-size: 3rem;
  font-weight: bold;
  color: #2D3748;
}

Exercise 6: Footer with links and social icons using flexbox

<footer class="flex justify-between items-center">
  <ul class="flex">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
  <div class="flex">
    <a href="#" class="mr-4">
      <i class="fab fa-facebook"></i>
    </a>
    <a href="#">
      <i class="fab fa-twitter"></i>
    </a>
  </div>
</footer>

In this example, we're using flexbox to create a footer with two sections: a list of links on the left and social icons on the right.

Tailwind classes used:

• The flex class on the parent footer (and anywhere) sets its display property to flex

• The justify-between class on the parent footer sets the horizontal alignment of its children to be distributed evenly with space between.

• The items-center class on the parent footer sets the vertical alignment of its children to be centered.

• The mr-4 class on the first child a sets its margin-right to 1rem

Equivalent CSS styles:

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex {
  display: flex;
}

li {
  margin-right: 1rem;
}

a {
  color: #4A5568;
}

i {
  font-size: 1.5rem;
}

.fab.fa-facebook {
  color: #4267B2;
}

.fab.fa-twitter {
  color: #1DA1F2;
}

Exercise 7: Image grid with captions using grid

<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
  <div class="relative">
    <img src="https://via.placeholder.com/300x300" alt="Image 1">
    <p class="absolute bottom-0 left-0 right-0 p-4 bg-gray-800 text-white">Caption 1</p>
  </div>
  <div class="relative">
    <img src="https://via.placeholder.com/300x300" alt="Image 2">
    <p class="absolute bottom-0 left-0 right-0 p-4 bg-gray-800 text-white">Caption 2</p>
  </div>
  <div class="relative hidden md:block">
    <img src="https://via.placeholder.com/300x300" alt="Image 3">
    <p class="absolute bottom-0 left-0 right-0 p-4 bg-gray-800 text-white">Caption 3</p>
  </div>
  <!-- More images and captions here -->
</div>

In this example, we're using grid to create an image grid with captions. On smaller screens, we show two images per row and stack them on top of each other on larger screens.

Tailwind classes used:

• grid: sets the display property of the element to grid

• grid-cols-2: sets the number of columns in the grid to 2

• md:grid-cols-3: sets the number of columns in the grid to 3 on medium screens and up

• gap-4: sets the gap between grid cells to be 1rem

• relative: sets the position property of the element to relative

• absolute: sets the position property of the element to absolute

• bottom-0: sets the bottom property of the element to 0

• left-0: sets the left property of the element to 0

• right-0: sets the right property of the element to 0

• p-4: sets the padding of the element to 1rem

Equivalent CSS styles:

div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 1rem;
}

@media (min-width: 768px) {
  div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

div > div {
  position: relative;
}

div > div > img {
  display: block;
  max-width: 100%;
  height: auto;
}

div > div > p {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background-color: #2D3748;
  color: #FFF;
}

Exercise 8: Sticky sidebar using grid

code<div class="grid grid-cols-12 gap-4">
  <main class="col-span-8">
    <h1 class="text-3xl font-bold mb-4">Main content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum, felis vel bibendum faucibus, turpis velit facilisis odio, sit amet efficitur quam nisi sit amet nunc. </p>
  </main>
  <aside class="col-span-4 sticky top-4">
    <h2 class="text-lg font-bold mb-4">Sidebar</h2>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </aside>
</div>

In this example, we're using grid to create a two-column layout with a sticky sidebar on the right.

• Tailwind classes used:

  • grid: sets the display property of the element to grid

  • grid-cols-12: sets the number of columns in the grid to 12

  • gap-4: sets the gap between grid cells to be 1rem

  • col-span-8: sets the element to span 8 columns

  • col-span-4: sets the element to span 4 columns

  • sticky: sets the position of the element to sticky

  • top-4: sets the top property of the element to 1rem

Equivalent CSS styles:

    .grid {
      display: grid;
      }
    .grid-cols-12{
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    .gap-4{
      grid-gap: 1rem;
    }
    .col-span-8 {
      grid-column: span 8;
    }
    .col-span-4 {
      grid-column: span 4;
    } 
    .sticky {
      position: sticky;
    }
    .top-4 {
      top: 1rem;
    }
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    a {
      color: #4A5568;
    }

    h1 {
      font-size: 3rem;
      font-weight: bold;
      margin-bottom: 1rem;
    }

    h2 {
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 1rem;
    }

These are just some examples of what you can do with Tailwind CSS and flexbox or grid. Feel free to experiment and come up with your own layouts!

I hope this helps you on your journey!

Jon Christie

jonchristie.net