Meta tags:
description=Utilities for controlling how elements are sized and placed across grid columns.;

Headings (most frequently used words):

tailwind, grid, css, resources, plus, community, column, examples, getting, started, core, concepts, base, styles, layout, flexbox, spacing, sizing, typography, backgrounds, borders, effects, filters, tables, transitions, animation, transforms, interactivity, svg, accessibility, spanning, columns, starting, and, ending, lines, using, custom, value, responsive, design, on, this, page,

Text of the page (most frequently used words):
col (47), grid (45), div (32), #column (27), span (23), number (20), end (18), start (18), class (17), value (16), #custom (15), property (12), and (11), size (11), text (11), columns (10), color (10), auto (9), mask (9), background (9), style (8), font (8), the (7), var (7), width (7), tailwind (6), utilities (6), scroll (6), align (6), border (6), flex (6), transition (5), position (5), break (5), decoration (5), documentation (4), css (4), template (4), like (4), for (4), use (4), line (4), flexbox (4), transform (4), origin (4), mode (4), outline (4), content (4), height (4), max (4), min (4), community (3), kit (3), templates (3), plus (3), showcase (3), blog (3), playground (3), responsive (3), design (3), using (3), rows (3), with (3), gap (3), calc (3), styles (3), snap (3), type (3), scrollbar (3), behavior (3), sizing (3), rotate (3), spacing (3), shadow (3), image (3), box (3), overflow (3), wrap (3), list (3), block (3), inline (3), place (3), self (3), items (3), justify (3), discord (2), github (2), hero (2), patterns (2), heroicons (2), headless (2), refactoring (2), resources (2), blocks (2), sponsor (2), starting (2), ending (2), lines (2), spanning (2), examples (2), this (2), more (2), variants (2), variant (2), utility (2), function (2), you (2), variables (2), can (2), also (2), cols (2), make (2), element (2), stroke (2), padding (2), margin (2), perspective (2), visibility (2), animation (2), layout (2), sepia (2), saturate (2), opacity (2), invert (2), hue (2), grayscale (2), contrast (2), brightness (2), blur (2), filter (2), repeat (2), clip (2), blend (2), offset (2), object (2), classes (2), trademark, policy, copyright, 2026, labs, inc, quick, reference, page, learn, about, prefix, breakpoint, only, apply, medium, screen, sizes, above, just, shorthand, that, adds, automatically, syntax, 16_, _span_16, set, location, based, completely, these, combined, specific, nth, show, full, controlling, how, elements, are, sized, placed, across, forced, adjust, accessibility, fill, svg, will, change, user, select, touch, action, stop, gutter, resize, pointer, events, field, cursor, scheme, caret, appearance, accent, interactivity, zoom, translate, skew, scale, backface, transforms, delay, timing, duration, transitions, caption, side, table, collapse, tables, backdrop, drop, filters, composite, mix, effects, radius, borders, attachment, backgrounds, hyphens, word, white, space, vertical, tab, indent, underline, thickness, clamp, letter, feature, settings, numeric, stretch, weight, smoothing, family, typography, flow, row, order, shrink, grow, direction, basis, index, top, right, bottom, left, overscroll, fit, isolation, clear, float, display, inside, before, after, aspect, ratio, preflight, base, functions, directives, detecting, source, files, adding, colors, theme, dark, hover, focus, other, states, styling, core, concepts, upgrade, guide, compatibility, editor, setup, installation, getting, started, new, course, components, partners, docs, ctrl,

Text of the page (random words):
grid column flexbox grid tailwind css v 4 3 k ctrl k docs blog showcase partners plus flexbox grid grid column documentation components templates ui kit playground course new community getting started installation editor setup compatibility upgrade guide core concepts styling with utility classes hover focus and other states responsive design dark mode theme variables colors adding custom styles detecting classes in source files functions and directives base styles preflight layout aspect ratio columns break after break before break inside box decoration break box sizing display float 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 grid template rows grid row 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 sizing width min width max width height min height max height inline size min inline size max inline size block size min block size max block size typography font family font size font smoothing font style font weight font stretch font variant numeric font feature settings letter spacing line clamp line height list style image list style position list style type text align color text decoration line text decoration color text decoration style text decoration thickness text underline offset text transform text overflow text wrap text indent tab size vertical align white space word break overflow wrap hyphens content backgrounds background attachment background clip background color background image background origin background position background repeat background size borders border radius border width border color border style outline width outline color outline style outline offset effects box shadow text shadow opacity mix blend mode background blend mode mask clip mask composite mask image mask mode mask origin mask position mask repeat mask size mask type filters filter blur brightness contrast drop shadow grayscale hue rotate invert saturate sepia backdrop filter blur brightness contrast grayscale hue rotate invert opacity saturate sepia tables border collapse border spacing table layout caption side transitions animation transition property transition behavior transition duration transition timing function transition delay animation transforms backface visibility perspective perspective origin rotate scale skew transform transform origin transform style translate zoom interactivity accent color appearance caret color color scheme cursor field sizing pointer events resize scroll behavior scrollbar color scrollbar width scrollbar gutter 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 forced color adjust flexbox grid grid column utilities for controlling how elements are sized and placed across grid columns class styles col span number grid column span number span number col span full grid column 1 1 col span custom property grid column span var custom property span var custom property col span value grid column span value span value col start number grid column start number col start number grid column start calc number 1 col start auto grid column start auto col start custom property grid column start var custom property col start value grid column start value col end number grid column end number col end number grid column end calc number 1 col end auto grid column end auto col end custom property grid column end var custom property col end value grid column end value col auto grid column auto col number grid column number col number grid column calc number 1 col custom property grid column var custom property col value grid column value show more examples spanning columns use col span number utilities like col span 2 and col span 4 to make an element span n columns 01 02 03 04 05 06 07 div class grid grid cols 3 gap 4 div class 01 div div class 02 div div class 03 div div class col span 2 04 div div class 05 div div class 06 div div class col span 2 07 div div starting and ending lines use col start number or col end number utilities like col start 2 and col end 3 to make an element start or end at the nth grid line 01 02 03 04 div class grid grid cols 6 gap 4 div class col span 4 col start 2 01 div div class col start 1 col end 3 02 div div class col span 2 col end 7 03 div div class col start 1 col end 7 04 div div these can also be combined with the col span number utilities to span a specific number of columns using a custom value use utilities like col value col span value col start value and col end value to set the grid column size and location based on a completely custom value div class col 16_ _span_16 div for css variables you can also use the col custom property syntax div class col my columns div this is just a shorthand for col var custom property that adds the var function for you automatically responsive design prefix grid column grid column start and grid column end utilities with a breakpoint variant like md to only apply the utility at medium screen sizes and above div class col span 2 md col span 6 div learn more about using variants in the variants documentation grid template columns grid template rows on this page quick reference examples spanning columns starting and ending lines using a custom value responsive design tailwind css documentation playground blog showcase sponsor resources refactoring ui headless ui heroicons hero patterns tailwind plus ui blocks templates ui kit community github discord x tailwind css documentation playground blog showcase sponsor tailwind plus ui blocks templates ui kit resources refactoring ui headless ui heroicons hero patterns community github discord x copyright 2026 tailwind labs inc trademark policy