Difference between `grid-template-columns` and `grid-auto-columns`?
Jul 22, 2025 am 02:09 AM
The core difference is that grid-template-columns defines explicitly set columns in the layout, while grid-auto-columns controls implicitly created columns when needed. grid-template-columns sets up the exact number and size of columns you define, such as 200px, 1fr, 2fr, creating a fixed structure. If items are placed beyond these defined columns, the browser creates new ones automatically, and grid-auto-columns determines their width. For example, with grid-template-columns: repeat(3, 100px) and grid-auto-columns: 50px, any overflow item placed in column 4 or beyond will fit into newly generated columns of 50px width. Use grid-template-columns to design intentional layouts with known dimensions, and use grid-auto-columns to manage unexpected or dynamic content overflow consistently.
When working with CSS Grid, grid-template-columns and grid-auto-columns both define column sizes, but they target different parts of the grid and behave differently under various conditions.
What’s the core difference?
In short:
-
grid-template-columnsdefines the number and size of columns that you explicitly create. -
grid-auto-columnssets the size for columns that are created implicitly when there are more grid items than defined tracks.
Now let's break it down in more practical terms.
1. grid-template-columns: Defining your layout
This property is used to set up the explicit grid — meaning, the columns you directly define in your CSS.
For example:
.grid {
display: grid;
grid-template-columns: 200px 1fr 2fr;
}This creates exactly three columns with the specified widths. Any grid item placed in these columns will follow their sizing rules.
? Use this when:
- You know how many columns you want upfront.
- You're defining a fixed or responsive layout manually.
- You're using named grid lines or areas.
If you place an item outside of these columns (like in a fourth column), the browser will automatically create new columns — and that’s where grid-auto-columns comes into play.
2. grid-auto-columns: Handling overflow columns
These columns are created automatically by the browser when there are more items than there are explicitly defined columns.
For instance:
.grid {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-auto-columns: 50px;
}If you have more than three columns worth of content (say, you use grid-column: 4 on an item), the browser will create new columns that are 50px wide.
?? Common gotchas:
- If you don’t set
grid-auto-columns, the default width isauto, which can lead to unpredictable layouts. - This property is especially useful when using
grid-auto-flow: column, which allows items to flow horizontally into new columns.
So while grid-template-columns gives you control over the structure you plan for, grid-auto-columns helps manage what happens when things go beyond that.
3. When to use each (and why it matters)
You’ll typically use both together in more complex layouts, especially when dealing with dynamic content.
Use grid-template-columns when:
- You’re designing a known layout (e.g., a 3-column dashboard).
- You need precise control over specific columns.
Use grid-auto-columns when:
- You expect items to be added dynamically beyond the initial layout.
- You’re creating a horizontal scrolling grid layout.
- You want implicit columns to maintain consistent sizing.
They also work well with other properties like minmax() and auto-fit in repeat() for responsive behavior.
Final thoughts
Understanding the difference between grid-template-columns and grid-auto-columns boils down to knowing which columns are explicitly defined versus which ones are automatically generated. Once you get that distinction, it becomes much easier to control how your grid behaves under different scenarios.
That’s basically it — not too complicated once you see how they fit together.
The above is the detailed content of Difference between `grid-template-columns` and `grid-auto-columns`?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
CSS Grid vs Flexbox: code comparison
Jun 01, 2025 am 12:03 AM
CSSGrid and Flexbox can be used in combination, but Grid is more suitable for two-dimensional layouts, while Flexbox is good at one-dimensional layouts. 1.Grid defines grid structure through grid-template-rows and grid-template-columns, which is suitable for complex two-dimensional layouts. 2. Flexbox controls direction and space allocation through flex-direction and flex attributes, suitable for one-dimensional layout and simple responsive design. 3. In terms of performance, Flexbox is suitable for simple layouts, and Grid is suitable for complex layouts, but may affect browser rendering performance. 4. Compatibility, Flexbox supports more extensively, Grid in modern browsers
How can CSS Grid's minmax() function be used to create flexible grid tracks?
Jun 07, 2025 am 12:12 AM
CSS's minmax() function is used to define the minimum and maximum size range of grid tracks, thereby improving layout flexibility. Its core function is to let the developer specify a size interval, such as minmax (200px, 1fr) means that the column width is at least 200px and can be stretched to 1fr at most. Common uses include responsive card layout, automatic column width adjustment of data tables, and balanced blank areas. Commonly used combinations include minmax (200px, 1fr), minmax (min-content,max-content), minmax (150px, 300px) and minmax (auto, 1fr). Notes include avoiding setting too high minimum values ??and testing different screens
What are the advantages of using CSS Grid for complex two-dimensional page layouts?
Jun 12, 2025 am 10:28 AM
CSSGridisapowerfultoolforcreatingcomplextwo-dimensionallayoutsbyofferingcontroloverbothrowsandcolumns.1.Itallowsexplicitdefinitionofrowsandcolumnswithflexiblesizingusingfeatureslikegrid-template-columns:repeat(auto-fit,minmax(200px,1fr))forresponsive
Can you nest a Flexbox container inside a CSS Grid item?
Jun 22, 2025 am 12:40 AM
Yes, you can use Flexbox in CSSGrid items. The specific approach is to first divide the page structure with Grid and set the subcontainer into a Grid cell as a Flex container to achieve more fine alignment and arrangement; for example, nest a div with display:flex style in HTML; the benefits of doing this include hierarchical layout, easier responsive design, and more friendly component development; it is necessary to note that the display attribute only affects direct child elements, avoids excessive nesting, and considers the compatibility issues of old browsers.
What are fr units in CSS Grid?
Jun 22, 2025 am 12:46 AM
ThefrunitinCSSGriddistributesavailablespaceproportionally.1.Itworksbydividingspacebasedonthesumoffrvalues,e.g.,1fr2frgivesone-thirdandtwo-thirds.2.Itenablesflexiblelayouts,avoidsmanualcalculations,andsupportsresponsivedesign.3.Commonusesincludeequal-
What is CSS Grid Layout?
Jun 23, 2025 am 12:13 AM
CSSGrid is a two-dimensional web layout tool that allows developers to accurately control the position and size of page elements by defining rows and columns. Unlike Flexbox, it can handle rows and columns simultaneously, suitable for building complex structures. To use Grid, you must first set the container to display:grid, and define the row and column size through 1.grid-template-columns and 2.grid-template-rows, set the spacing, and 4.grid-template-areas named area to improve readability. Its typical application scenarios include responsive layouts, dashboard interfaces, and picture galleries. Practical tips include: 5. Use grid-column/g
How to place items on a CSS grid using line numbers?
Jun 25, 2025 am 12:36 AM
ToplaceitemsonaCSSGridusinglinenumbers,youspecifythestartandendlinesforrowsandcolumns.1)Gridlinesareautomaticallynumberedstartingfrom1atthetop-leftcorner,withverticallinesseparatingcolumnsandhorizontallinesseparatingrows.2)Usegrid-columnandgrid-rowto
How to use CSS Grid and Flexbox together tutorial
Jun 27, 2025 am 12:40 AM
CSSGrid and Flexbox each have their own expertise, and the best results are used together. Grid is a two-dimensional layout that is suitable for the overall page structure, such as the arrangement of the header, sidebar, main content area, and footer; Flexbox is a one-dimensional layout that is more suitable for internal arrangement of components, such as navigation bar, button group, card list, etc. For example, use Grid in the middle of the three-column layout and then block up and down, and use Flexbox to automatically align several buttons in a row. The actual combination method is: the outer container uses display:grid to define the overall framework, and the child elements are arranged using display:flex in each area. Common structures include the entire page using Grid to divide blocks, and the navigation bar, button group and card list are aligned with Flexbox. Note
