tailwindcss.com Open in urlscan Pro
2606:4700:10::6816:1590  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Tailwind CSS home page
v3.4.13
Introducing CatalystA modern application UI kit for React
 * Docs
 * Components
 * Blog
 * Showcase

ThemeTailwind CSS on GitHub
Search
Navigation

Navigation
 1. Flexbox & Grid
 2. Grid Template Columns

Quick search...Ctrl K

 * 
   Documentation
 * 
   Components
 * 
   Templates
 * 
   Screencasts
 * 
   Playground
 * 
   Resources
 * 
   Community

 * GETTING STARTED
   
   * Installation
   * Editor Setup
   * Using with Preprocessors
   * Optimizing for Production
   * Browser Support
   * Upgrade Guide

 * CORE CONCEPTS
   
   * Utility-First Fundamentals
   * Hover, Focus, and Other States
   * Responsive Design
   * Dark Mode
   * Reusing Styles
   * Adding Custom Styles
   * Functions & Directives

 * CUSTOMIZATION
   
   * Configuration
   * Content
   * Theme
   * Screens
   * Colors
   * Spacing
   * Plugins
   * Presets

 * BASE STYLES
   
   * Preflight

 * LAYOUT
   
   * Aspect Ratio
   * Container
   * Columns
   * Break After
   * Break Before
   * Break Inside
   * Box Decoration Break
   * Box Sizing
   * Display
   * Floats
   * Clear
   * Isolation
   * Object Fit
   * Object Position
   * Overflow
   * Overscroll Behavior
   * Position
   * Top / Right / Bottom / Left
   * Visibility
   * Z-Index

 * FLEXBOX & GRID
   
   * Flex Basis
   * Flex Direction
   * Flex Wrap
   * Flex
   * Flex Grow
   * Flex Shrink
   * Order
   * Grid Template Columns
   * Grid Column Start / End
   * Grid Template Rows
   * Grid Row Start / End
   * Grid Auto Flow
   * Grid Auto Columns
   * Grid Auto Rows
   * Gap
   * Justify Content
   * Justify Items
   * Justify Self
   * Align Content
   * Align Items
   * Align Self
   * Place Content
   * Place Items
   * Place Self

 * SPACING
   
   * Padding
   * Margin
   * Space Between

 * SIZING
   
   * Width
   * Min-Width
   * Max-Width
   * Height
   * Min-Height
   * Max-Height
   * Size

 * TYPOGRAPHY
   
   * Font Family
   * Font Size
   * Font Smoothing
   * Font Style
   * Font Weight
   * Font Variant Numeric
   * Letter Spacing
   * Line Clamp
   * Line Height
   * List Style Image
   * List Style Position
   * List Style Type
   * Text Align
   * Text Color
   * Text Decoration
   * Text Decoration Color
   * Text Decoration Style
   * Text Decoration Thickness
   * Text Underline Offset
   * Text Transform
   * Text Overflow
   * Text Wrap
   * Text Indent
   * Vertical Align
   * Whitespace
   * Word Break
   * Hyphens
   * Content

 * BACKGROUNDS
   
   * Background Attachment
   * Background Clip
   * Background Color
   * Background Origin
   * Background Position
   * Background Repeat
   * Background Size
   * Background Image
   * Gradient Color Stops

 * BORDERS
   
   * Border Radius
   * Border Width
   * Border Color
   * Border Style
   * Divide Width
   * Divide Color
   * Divide Style
   * Outline Width
   * Outline Color
   * Outline Style
   * Outline Offset
   * Ring Width
   * Ring Color
   * Ring Offset Width
   * Ring Offset Color

 * EFFECTS
   
   * Box Shadow
   * Box Shadow Color
   * Opacity
   * Mix Blend Mode
   * Background Blend Mode

 * FILTERS
   
   * Blur
   * Brightness
   * Contrast
   * Drop Shadow
   * Grayscale
   * Hue Rotate
   * Invert
   * Saturate
   * Sepia
   * Backdrop Blur
   * Backdrop Brightness
   * Backdrop Contrast
   * Backdrop Grayscale
   * Backdrop Hue Rotate
   * Backdrop Invert
   * Backdrop Opacity
   * Backdrop Saturate
   * Backdrop Sepia

 * TABLES
   
   * Border Collapse
   * Border Spacing
   * Table Layout
   * Caption Side

 * TRANSITIONS & ANIMATION
   
   * Transition Property
   * Transition Duration
   * Transition Timing Function
   * Transition Delay
   * Animation

 * TRANSFORMS
   
   * Scale
   * Rotate
   * Translate
   * Skew
   * Transform Origin

 * INTERACTIVITY
   
   * Accent Color
   * Appearance
   * Cursor
   * Caret Color
   * Pointer Events
   * Resize
   * Scroll Behavior
   * Scroll Margin
   * Scroll Padding
   * Scroll Snap Align
   * Scroll Snap Stop
   * Scroll Snap Type
   * Touch Action
   * User Select
   * Will Change

 * SVG
   
   * Fill
   * Stroke
   * Stroke Width

 * ACCESSIBILITY
   
   * Screen Readers
   * Forced Color Adjust

 * OFFICIAL PLUGINS
   
   * Typography
   * Forms
   * Aspect Ratio
   * Container Queries

Flexbox & Grid


GRID TEMPLATE COLUMNS

Utilities for specifying the columns in a grid layout.


QUICK REFERENCE

Class
Properties
grid-cols-1grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-2grid-template-columns: repeat(2, minmax(0, 1fr));
grid-cols-3grid-template-columns: repeat(3, minmax(0, 1fr));
grid-cols-4grid-template-columns: repeat(4, minmax(0, 1fr));
grid-cols-5grid-template-columns: repeat(5, minmax(0, 1fr));
grid-cols-6grid-template-columns: repeat(6, minmax(0, 1fr));
grid-cols-7grid-template-columns: repeat(7, minmax(0, 1fr));
grid-cols-8grid-template-columns: repeat(8, minmax(0, 1fr));
grid-cols-9grid-template-columns: repeat(9, minmax(0, 1fr));
grid-cols-10grid-template-columns: repeat(10, minmax(0, 1fr));
grid-cols-11grid-template-columns: repeat(11, minmax(0, 1fr));
grid-cols-12grid-template-columns: repeat(12, minmax(0, 1fr));
grid-cols-nonegrid-template-columns: none;
grid-cols-subgridgrid-template-columns: subgrid;



Show all classes


BASIC USAGE


SPECIFYING THE COLUMNS IN A GRID

Use the grid-cols-* utilities to create grids with n equally sized columns.

01
02
03
04
05
06
07
08
09


<div class="grid grid-cols-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>09</div>
</div>


SUBGRID

Use the grid-cols-subgrid utility to adopt the column tracks defined by the
item’s parent.

01
02
03
04
05
06



<div class="grid grid-cols-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>05</div>
  <div class="grid grid-cols-subgrid gap-4 col-span-3">
    <div class="col-start-2">06</div>
  </div>
</div>

--------------------------------------------------------------------------------


APPLYING CONDITIONALLY


HOVER, FOCUS, AND OTHER STATES

Tailwind lets you conditionally apply utility classes in different states using
variant modifiers. For example, use hover:grid-cols-6 to only apply the
grid-cols-6 utility on hover.

<div class="grid grid-cols-1 hover:grid-cols-6">
  <!-- ... -->
</div>


For a complete list of all available state modifiers, check out the Hover,
Focus, & Other States documentation.


BREAKPOINTS AND MEDIA QUERIES

You can also use variant modifiers to target media queries like responsive
breakpoints, dark mode, prefers-reduced-motion, and more. For example, use
md:grid-cols-6 to apply the grid-cols-6 utility at only medium screen sizes and
above.

<div class="grid grid-cols-1 md:grid-cols-6">
  <!-- ... -->
</div>


To learn more, check out the documentation on Responsive Design, Dark Mode and
other media query modifiers.

--------------------------------------------------------------------------------


USING CUSTOM VALUES


CUSTOMIZING YOUR THEME

By default, Tailwind includes grid-template-column utilities for creating basic
grids with up to 12 equal width columns. You can customize these values by
editing theme.gridTemplateColumns or theme.extend.gridTemplateColumns in your
tailwind.config.js file.

You have direct access to the grid-template-columns CSS property here so you can
make your custom column values as generic or as complicated and site-specific as
you like.

tailwind.config.js


module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: {
        // Simple 16 column grid
        '16': 'repeat(16, minmax(0, 1fr))',

        // Complex site-specific column configuration
        'footer': '200px minmax(900px, 1fr) 100px',
      }
    }
  }
}




Learn more about customizing the default theme in the theme customization
documentation.


ARBITRARY VALUES

If you need to use a one-off grid-template-columns value that doesn’t make sense
to include in your theme, use square brackets to generate a property on the fly
using any arbitrary value.

<div class="grid grid-cols-[200px_minmax(900px,_1fr)_100px]">
  <!-- ... -->
</div>


Learn more about arbitrary value support in the arbitrary values documentation.

OrderGrid Column Start / End

Copyright © 2024 Tailwind Labs Inc.

Trademark Policy

Edit this page on GitHub

ON THIS PAGE

 * Quick reference
 * Basic usage
 * Specifying the columns in a grid
 * Subgrid
 * Applying conditionally
 * Hover, focus, and other states
 * Breakpoints and media queries
 * Using custom values
 * Customizing your theme
 * Arbitrary values

From the creators of Tailwind CSS

Make your ideas look awesome, without relying on a designer.

> “This is the survival kit I wish I had when I started building apps.”

Derrick Reimer, SavvyCal