Grids in Tailwind CSS

We will be learning how to use grids in tailwind css using a simple example without writing or knowing a single line of plain css.

Grids

CSS Grid is a new way to create two-dimensional layouts on the web. With just a few lines of CSS.

Building grids using plain CSS is hard and time consuming. However, With just a few lines of Tailwind CSS we can create grids resulting in wonderful layouts.

A shelf

Taking this shelf as a real life example, lets see how we can make it in tailwind css using grid.

Let’s first understand on a piece of paper how our grids are going to be made. (P.S Its always a good practice to hand-run on a paper before getting started with the code.)

roughly drawn design of what have to code

<div class=“grid grid-flow-row grid-cols-2 border”>…</div>

Here I have created a grid of 2 columns and the flow in which I will be putting in content, in this case numbers, is row wise.

<div class=”grid grid-flow-row grid-cols-2 border”>
  <div class=”border”>1</div>
</div>

<div class=”grid grid-flow-row grid-cols-2 border”>
  <div class=”border”>1</div>
  <div class=”row-span-2 border”>2</div>
</div>

<div class=”grid grid-flow-row grid-cols-2 border”>
  <div class=”border”>1</div>
  <div class=”row-span-2 border”>2</div>
  <div class=”border”>3</div>
</div>

row-span-2 allows you to collectively include 2 rows for your content, which in this case is ‘2’.

<div class=”grid grid-flow-row grid-cols-2 border”>
  <div class=”border”>1</div>
  <div class=”row-span-2 border”>2</div>
  <div class=”border”>3</div>
  <div class=”border”>4</div>
  <div class=”border”>5</div>
  <div class=”border”>6</div>
</div>

here, after entering ‘6’th grid, there seems to be an empty space which will eventually be occupied by ‘7’

<div class=”grid grid-flow-row grid-cols-2 border”>
  <div class=”border”>1</div>
  <div class=”row-span-2 border”>2</div>
  <div class=”border”>3</div>
  <div class=”border”>4</div>
  <div class=”border”>5</div>
  <div class=”border”>6</div>
  <div class=”row-span-2 border”>7</div>
  <div class=”border”>8</div>
</div>

https://play.tailwindcss.com/zuBeBdzZQS

Here is the refined link, with a few changes in design for the above example. Feel free to send even more complex grid-challenges.

Thank you.