12-span Grid - v

Skip to main content Resources

• Web Platform
• Dive into the web platform, at your pace.
• HTML
• CSS
• JavaScript

• User experience
• Learn how to build better user experiences.
• Performance
• Accessibility
• Identity

• Learn
• Get up to speed on web development.
• Learn HTML
• Learn CSS
• Learn JavaScript
• Learn Performance
• Learn Accessibility
• More courses

• Additional resources
• Explore content collections, patterns, and more.
• AI and the web
• Explore
• PageSpeed Insights
• Patterns
• Podcasts & shows
• Developer Newsletter
• About web.dev

Baseline How to use Baseline Blog Case Studies / Sign in

• Resources
  • More
• Baseline
• How to use Baseline
• Blog
• Case Studies

• Home
• Patterns
• Layout patterns

12-span grid Stay organized with collections Save and categorize content based on your preferences.

Another classic: the 12-span grid. You can quickly write grids in CSS with the repeat() function. Using: repeat(12, 1fr); for the grid template columns gives you 12 columns each of 1fr.

.parent{ display:grid; grid-template-columns:repeat(12,1fr); } .child-span-12{ grid-column:1/13; }

Now you have a 12 column track grid, you can place child elements on the grid. One way to do this would be to place them using grid lines. For example, grid-column: 1 / 13 would span all the way from the first line to the last (13th) and span 12 columns. grid-column: 1 / 5; would span the first four.

Another way to write this is by using the span keyword. With span, you set the starting line and then how many columns to span into from that starting point. In this case, grid-column: 1 / span 12 would be equivalent to grid-column: 1 / 13, and grid-column: 2 / span 6 would be equivalent to grid-column: 2 / 8.

.child-span-12{ grid-column:1/span12; }

HTML

<div class="parent" translate="no"> <div class="span-12 section coral">Span 12</div> <div class="span-6 section green">Span 6</div> <div class="span-4 section yellow">Span 4</div> <div class="span-2 section blue">Span 2</div> </div>

CSS

.parent{ display:grid; grid-template-columns:repeat(12,1fr); } .span-12{ grid-column:1/span12; } .span-6{ grid-column:1/span6; } .span-4{ grid-column:4/span4; } .span-2{ grid-column:3/span2; } /* centering text */ .section{ display:grid; place-items:center; text-align:center }

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-12-09 UTC.

[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-12-09 UTC."],[],[]]

• web.dev

  • web.dev

    We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts.

• Contribute

  • File a bug
  • See open issues

• Related Content

  • Chrome for Developers
  • Chromium updates
  • Case studies
  • Podcasts & shows

• Follow

  • @ChromiumDev on X
  • YouTube
  • Chrome for Developers on LinkedIn
  • RSS

• Terms
• Privacy
• Manage cookies