CSS Grid with Tailwind

2023-01-08 html css tailwind responsive youtube

My HTML/CSS skills are very dated, haven’t done much coding lately. And those exceptions I needed to do at work I was able to work-around with frameworks like bootstrap. So the things like flexbox or grid mostly escaped my attention.

As I wanted to get familiar with this, I walked through following video, rewriting the CSS using Tailwind helpers.

What I learned:

the grid allows easy definition of something like table layout
a HTML element is marked as grid, it area is split into grid according to a grid-cols- and grid-rows- utilities. Tailwind provides uniform distribution for up to 12 rows or columns. Custom definitions can be added into tailwind.config.js, it can be then used with grid-cols-layout and grid-rows-layout respectively
```
 ...
 theme: {
   extend: {
     gridTemplateRows: {
       'layout' : '50px 1fr 100px',
     },
     gridTemplateColumns: {
       'layout' : '300px 1fr',
     }
   },
 ...
```
there is utility to control gap between the grid items gap-
embedded HTML elements are then placed regularly, but it can be easily defined to “span” across more grid cells using row-start- and row-end- utilities (or col-start- and col-end- for columns). The number refer to grid lines
alternative means to specifying the grid lines is row-span- and col-span- utilities

Resulting HTML was like this:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="output.css" rel="stylesheet">
</head>
<body>
<div class="w-screen h-screen grid grid-cols-layout grid-rows-layout gap-0">
  <div class="col-start-1 col-end-4 p-2">Header</div>
  <div class="p-2 hidden lg:block">Sidebar</div>
  <div id="maintext" class="row-start-2 row-end-3 col-start-1 lg:col-start-2 col-end-4 p-2 overflow-auto min-w-30">Main Text</div>
  <div class="col-span-3 p-2">This is a footer</div>
</div>
</body>
</html>

There is more to the properties and options provided by the grid, but I got a basic overview of what it does and how it works.