New This website is new, your feedback will help us to improve it.

Grid

Overview

The BAS Style Kit uses the grid system provided by Tailwind CSS 4 - Search for Grid.

Tailwind CCS 4 classes can be used to create and modify grid layouts.

Available grids

Tailwind CSS uses the .grid class to define a <div> element that will contain elements that will arrange themselves in a grid. The modifier .grid-columns or .grid-rows are used to specify which direction the grid elements will go in.

Grid columns

Grid columns by default run from left to right

<div class="grid grid-cols-4 gap-4">
  <div class="bg-purple-500 h-20"></div>
  <div class="bg-pink-500 h-20"></div>
  <div class="bg-orange-500 h-20"></div>
  <div class="bg-amber-500 h-20"></div>
  <div class="bg-green-500 h-20"></div>
  <div class="bg-blue-500 h-20"></div>
  <div class="bg-violet-500 h-20"></div>
  <div class="bg-pink-300 h-20"></div>
  <div class="bg-red-500 h-20"></div>
  <div class="bg-yellow-500 h-20"></div>
</div>

Grid rows

Grid rows by default run from top to bottom.

<div class="grid grid-flow-col grid-rows-4 gap-4">
  <div class="bg-purple-500 h-20"></div>
  <div class="bg-pink-500 h-20"></div>
  <div class="bg-orange-500 h-20"></div>
  <div class="bg-amber-500 h-20"></div>
  <div class="bg-green-500 h-20"></div>
  <div class="bg-blue-500 h-20"></div>
  <div class="bg-violet-500 h-20"></div>
  <div class="bg-pink-300 h-20"></div>
  <div class="bg-red-500 h-20"></div>
  <div class="bg-yellow-500 h-20"></div>
</div>

Grid breakpoints

Grids use the standard Tailwind CSS system for breakpoints / responsive design


.md:grid-cols-2

<div class="grid grid-cols-4 md:grid-cols-2 gap-4">
  <div class="bg-purple-500 h-20"></div>
  <div class="bg-pink-500 h-20"></div>
  <div class="bg-orange-500 h-20"></div>
  <div class="bg-amber-500 h-20"></div>
  <div class="bg-green-500 h-20"></div>
</div>

Grid modifiers

Column modifiers

Use the Grid column classes to modify the columns in a grid layout: https://tailwindcss.com/docs/grid-column

<div class="grid grid-cols-4 gap-4">
  <div class="bg-purple-500 h-20"></div>
  <div class="col-span-2 bg-pink-500 h-20"></div>
  <div class="bg-orange-500 h-20"></div>
  <div class="bg-amber-500 h-20"></div>
  <div class="col-start-4 bg-green-500 h-20"></div>
</div>

Row modifiers

Use the Grid row classes to modify the rows in a grid layout: https://tailwindcss.com/docs/grid-row

<div class="grid grid-flow-col grid-rows-4 gap-4">
  <div class="bg-yellow-500 h-20"></div>
  <div class="bg-pink-500 h-20"></div>
  <div class="row-span-2 bg-orange-500"></div>
  <div class="bg-blue-500 h-20"></div>
  <div class="row-span-3 bg-violet-500"></div>
  <div class="row-span-3 bg-pink-300"></div>
  <div class="bg-green-500 h-20"></div>
</div>

Offsetting columns

Use the .col-start-<number> and .col-end-<number> classes to position elements within a grid.

See Tailwind CSS - Starting and ending lines, for more information: https://tailwindcss.com/docs/grid-column#starting-and-ending-lines

<div class="grid grid-cols-4 gap-4">
<div class="col-start-2 bg-green-500 h-20"></div>
<div class="bg-green-500 h-20"></div>
<div class="col-start-3 bg-green-500 h-20"></div>
<div class="bg-green-500 h-20"></div>
<div class="col-start-4 bg-green-500 h-20"></div>
</div>

Nesting columns

<div class="grid grid-cols-4 gap-4">
  <div class="bg-green-500 h-20"></div>
  <div class="bg-yellow-500 h-20"></div>
  <div class="bg-purple-500 h-20"></div>
  <div class="bg-pink-500 h-20"></div>
  <div class="bg-pink-500 h-20"></div>
  <div class="grid grid-cols-2 gap-4">
      <div class="bg-blue-500 h-20"></div>
      <div class="bg-blue-500 h-20"></div>
  </div>
  <div class="grid grid-cols-2 gap-4">
      <div class="bg-blue-500 h-20"></div>
      <div class="bg-blue-500 h-20"></div>
  </div>
  <div class="bg-red-500 h-20"></div>
  <div class="bg-yellow-500 h-20"></div>
</div>

Ordering columns

Use the order-<number> class to reorder elements in a grid.

See Tailwind CSS - Flex & Grid order, for more information: https://tailwindcss.com/docs/order

01
02
03
<div class="grid grid-cols-4 gap-4 text-center">
  <div class="order-3 bg-red-500 h-20 flex items-center justify-center text-white text-xl"><b>01</b></div>
  <div class="order-1 bg-green-500 h-20 flex items-center justify-center text-white text-xl"><b>02</b></div>
  <div class="order-2 bg-blue-500 h-20 flex items-center justify-center text-white text-xl"><b>03</b></div>
</div>