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'