Grids Cheatsheet

Native CSS Grid

Grid Container Properties

.container {
  display: grid;
  /* OR */
  display: inline-grid;

  /* Define columns */
  grid-template-columns: 100px 100px 100px;        /* Fixed width */
  grid-template-columns: 1fr 1fr 1fr;              /* Fractional units */
  grid-template-columns: repeat(3, 1fr);           /* Repeat syntax */
  grid-template-columns: minmax(100px, 1fr);       /* Responsive columns */
  grid-template-columns: auto 1fr auto;            /* Auto-sized columns */

  /* Define rows */
  grid-template-rows: 100px 100px;                 /* Fixed height */
  grid-template-rows: repeat(3, minmax(100px, auto)); /* Responsive rows */

  /* Define template areas */
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";                        /* Named grid areas */

  /* Gaps */
  gap: 20px;                                       /* Both row and column gap */
  row-gap: 20px;                                   /* Row gap only */
  column-gap: 20px;                                /* Column gap only */

  /* Grid alignment */
  justify-items: start | end | center | stretch;   /* Horizontal alignment */
  align-items: start | end | center | stretch;     /* Vertical alignment */
  place-items: center center;                      /* Shorthand for both */

  /* Grid content alignment */
  justify-content: start | end | center | space-between | space-around;
  align-content: start | end | center | space-between | space-around;

  /* Auto-flow */
  grid-auto-flow: row | column | dense;
}
            
        

Grid Item Properties

.item {
  /* Grid Area - Multiple ways to use it */
  grid-area: header;                              /* Named template area */
  grid-area: 1 / 1 / 2 / 3;                       /* row-start/column-start/row-end/column-end */
  grid-area: 2 / span 3;                          /* Start at row 2, span 3 columns */

  /* Individual grid-row/column properties */
  grid-column: 1 / 3;                             /* Start / end column */
  grid-column: span 2;                            /* Span multiple columns */
  grid-row: 1 / 3;                                /* Start / end row */

  /* Individual alignment */
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
  place-self: center center;                      /* Shorthand for both */
}

/* Example usage of grid-area with template areas */
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
            
        

Tailwind CSS Grid

Grid Container Classes

<!-- Basic grid -->
<div class="grid">

<!-- Column configurations -->
<div class="grid grid-cols-3">                    <!-- 3 equal columns -->
<div class="grid grid-cols-none">                 <!-- No columns -->
<div class="grid grid-cols-[200px_1fr_200px]">    <!-- Custom columns -->

<!-- Row configurations -->
<div class="grid grid-rows-3">                    <!-- 3 equal rows -->
<div class="grid grid-rows-[200px_1fr_100px]">    <!-- Custom rows -->

<!-- Gaps -->
<div class="gap-4">                               <!-- Both row and column gap -->
<div class="gap-x-4">                             <!-- Column gap only -->
<div class="gap-y-4">                             <!-- Row gap only -->

<!-- Auto flow -->
<div class="grid-flow-row">
<div class="grid-flow-col">
<div class="grid-flow-dense">

<!-- Alignment -->
<div class="justify-items-start">
<div class="justify-items-center">
<div class="items-center">                        <!-- Vertical alignment -->
            
        

Grid Item Classes

<!-- Column span -->
<div class="col-span-2">                          <!-- Span 2 columns -->
<div class="col-start-2">                         <!-- Start at column 2 -->
<div class="col-end-4">                           <!-- End at column 4 -->

<!-- Row span -->
<div class="row-span-2">                          <!-- Span 2 rows -->
<div class="row-start-2">                         <!-- Start at row 2 -->
<div class="row-end-4">                           <!-- End at row 4 -->

<!-- Individual alignment -->
<div class="justify-self-start">
<div class="justify-self-center">
<div class="self-center">                         <!-- Vertical self-alignment -->
            
        

Bootstrap Grid (v5)

Container Classes

<!-- Basic grid container -->
<div class="container">
<div class="container-fluid">                     <!-- Full-width container -->

<!-- Row -->
<div class="row">                                 <!-- Basic row -->
<div class="row g-3">                             <!-- Row with gap -->

<!-- Responsive behavior -->
<div class="row row-cols-1">                      <!-- 1 column -->
<div class="row row-cols-md-2">                   <!-- 2 columns on md screens -->
<div class="row row-cols-lg-3">                   <!-- 3 columns on lg screens -->
            
        

Column Classes

<!-- Basic columns -->
<div class="col">                                 <!-- Equal width -->
<div class="col-6">                               <!-- 6/12 width -->
<div class="col-auto">                            <!-- Content-width -->

<!-- Responsive columns -->
<div class="col-sm-6">                           <!-- 6/12 on small screens -->
<div class="col-md-4">                           <!-- 4/12 on medium screens -->
<div class="col-lg-3">                           <!-- 3/12 on large screens -->

<!-- Column ordering -->
<div class="order-1">                            <!-- Order first -->
<div class="order-last">                         <!-- Order last -->

<!-- Offset -->
<div class="offset-md-3">                        <!-- Offset by 3 columns -->

<!-- Alignment -->
<div class="align-self-start">
<div class="align-self-center">
<div class="align-self-end">
            
        

Common Breakpoints

/* Bootstrap breakpoints */
--bs-breakpoint-sm: 576px;
--bs-breakpoint-md: 768px;
--bs-breakpoint-lg: 992px;
--bs-breakpoint-xl: 1200px;
--bs-breakpoint-xxl: 1400px;

/* Tailwind default breakpoints */
sm: '640px'
md: '768px'
lg: '1024px'
xl: '1280px'
2xl: '1536px'