- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS grid - grid-template-columns
The CSS property grid-template-columns defines both the names of lines and the sizing functions for the columns within a grid.
Possible values
none - It's a keyword that indicates the absence of an explicit grid structure. In this case, the columns are created implicitly and their size is determined by the grid-auto-columns property.
[line-name] - A <custom-ident> designates a name for the row positioned there. This identifier can be any valid string, with the exception of the reserved terms span and auto.
Lines can have multiple names separated by spaces within the square brackets, such as [line-name-a line-name-b]
<length> - Is a non-negative length, giving the width of the column
<percentage> - This value is a non-negative <percentage> relative to the block size of the grid container. If the size of the grid container depends on its tracks, the percentage behaves like auto to determine the actual size of the container.
<flex> - This value is a non-negative dimension with the unit fr, which indicates the flex factor of the track. Each track that has a certain size takes up a portion of the remaining space based on its flex factor.
max-content - It's a keyword that specifies the maximum content contribution of the grid elements that occupy the grid track.
min-content - It's a keyword that specifies the largest minimum content contribution of the grid elements within the grid track.
minmax(min, max) - This function defines a size range, from min to max values. If the maximum value is smaller than the minimum value, the maximum value isn't taken into account and the function only uses the minimum value.
auto - The maximum value represents the largest maximum content size of the elements within the track. The minimum value specifies the largest minimum size of the elements, often the min-content size (specified by min-width/min-height).
fit-content( [ <length> | <percentage> ] ) - This formula, max(minimum, min(limit, max-content)), represents a calculation where minimum represents an automatic minimum (often but not always equal to the minimum of min-content), and limit represents the track resizing function passed as an argument to fit-content(). Essentially, it's the smaller value between minmax(auto, max-content) and minmax(auto, limit).
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ) - Represents a repeating section of the track list and allows numerous columns with a recurring pattern to be written in a more compressed manner.
subgrid - If set as subgrid, this means that the grid will inherit the spanned section of its parent grid along this axis. Instead of defining it explicitly, the rows/columns of the grid will be derived from the parent grid's definition.
Syntax
grid-template-columns = none | <track-list> | <auto-track-list> | subgrid <line-name-list>?
Applies to
Grid containers.
CSS grid-template-columns - Using [line-names]
The following example demonstrates specifying grid columns using line names
<html> <head> <style> body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f8ff; font-family: 'Arial', sans-serif; } #container { display: grid; grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr; gap: 15px; max-width: 600px; width: 80vw; margin: auto; } #container > div { background-color: #ff9966; color: #fff; font-size: 1.2em; display: flex; align-items: center; justify-content: center; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } </style> </head> <body> <div id="container"> <div style="grid-column: col1 / col4;">Header Column</div> <div>Item One</div> <div>Item Two</div> <div>Item Three</div> <div>Item Four</div> <div>Item Five</div> <div>Item Six</div> <div>Item Seven</div> <div>Item Eight</div> </div> </body> </html>
CSS grid-template-colums - Using <length>
The following example demonstrates specifying grid columns using length values
<html> <head> <style> body { background-color: #f8f8f8; font-family: 'Verdana', sans-serif; margin: 0; justify-content: center; align-items: center; height: 100vh; } #customGrid { height: 300px; display: grid; gap: 20px; background-color: #2ecc71; padding: 20px; grid-template-columns: 120px 180px 150px; border-radius: 15px; } #customGrid div { background-color: #3498db; color: #fff; text-align: center; padding: 30px 0; font-size: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } </style> </head> <body> <h1>The grid-template-columns with Length Values</h1> <div id="customGrid"> <div class="boxA">Alpha</div> <div class="boxB">Beta</div> <div class="boxC">Gamma</div> <div class="boxD">Delta</div> <div class="boxE">Theta</div> <div class="boxF">Lambda</div> </div> </body> </html>
CSS grid-template-colums - Using <percentage>
The following example demonstrates specifying grid columns using length value in percentage
<html> <head> <style> body { background-color: #f8f8f8; font-family: 'Verdana', sans-serif; margin: 0; justify-content: center; align-items: center; height: 100vh; } #customGrid { height: 300px; display: grid; gap: 20px; background-color: #e74c3c; padding: 20px; grid-template-columns: 20% 40% 20%; border-radius: 15px; } #customGrid div { background-color: #3498db; color: #fff; text-align: center; padding: 30px 0; font-size: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } </style> </head> <body> <h1>The grid-template-columns with Percentage Values</h1> <div id="customGrid"> <div class="boxA">Alpha</div> <div class="boxB">Beta</div> <div class="boxC">Gamma</div> <div class="boxD">Delta</div> <div class="boxE">Theta</div> <div class="boxF">Lambda</div> </div> </body> </html>
CSS grid-template-colums - Using <flex>
The following example demonstrates specifying grid columns using flex values in fr
<html> <head> <style> body { background-color: #f0f0f0; font-family: 'Arial', sans-serif; margin: 0; justify-content: center; align-items: center; height: 100vh; } #customGrid { height: 250px; display: grid; gap: 20px; background-color: #2ecc71; padding: 20px; grid-template-columns: 0.5fr 1fr 1.5fr; border-radius: 15px; } #customGrid div { background-color: #3498db; color: #fff; text-align: center; padding: 20px 0; font-size: 25px; border-radius: 5px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); } </style> </head> <body> <h1>The grid-template-columns with Fractional Unit (fr) Values</h1> <div id="customGrid"> <div class="boxA">Alpha</div> <div class="boxB">Beta</div> <div class="boxC">Gamma</div> <div class="boxD">Delta</div> <div class="boxE">Theta</div> <div class="boxF">Lambda</div> </div> </body> </html>
CSS grid-template-colums - Using max-content
The following example demonstrates specifying grid columns using max-content
<html> <head> <style> body { background-color: #f5f5f5; font-family: 'Arial', sans-serif; margin: 0; justify-content: center; align-items: center; height: 100vh; } #customGrid { height: 300px; display: grid; gap: 20px; background-color: #b0b5b3; padding: 20px; grid-template-columns: max-content max-content max-content; border-radius: 15px; } #customGrid div { background-color: #2980b9; color: #fff; text-align: center; padding: 20px; font-size: 16px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style> </head> <body> <h1>The grid-template-columns with max-content Values</h1> <div id="customGrid"> <div class="boxA">Alpha Element with some content</div> <div class="boxB">Beta Element</div> <div class="boxC">Gamma Element</div> <div class="boxD">Delta Element</div> <div class="boxE">Theta Element</div> <div class="boxF">Lambda Element some content</div> </div> </body> </html>
CSS grid-template-colums - Using min-content
The following example demonstrates specifying grid columns using min-content
<html> <head> <style> body { background-color: #f4f4f4; font-family: 'Arial', sans-serif; margin: 0; justify-content: center; align-items: center; height: 100vh; } #customGrid { height: 300px; display: grid; gap: 20px; background-color: #c8cfcc; padding: 20px; grid-template-columns: min-content min-content min-content; border-radius: 15px; } #customGrid div { background-color: #2c3e50; color: #ecf0f1; text-align: center; padding: 20px; font-size: 16px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } </style> </head> <body> <h1>The grid-template-columns with min-content Values</h1> <div id="customGrid"> <div class="boxA">Alpha Element with some content</div> <div class="boxB">Beta Element</div> <div class="boxC">Gamma Element</div> <div class="boxD">Delta Element</div> <div class="boxE">Theta Element</div> <div class="boxF">Lambda Element some content</div> </div> </body> </html>
CSS grid-template-colums - Using minmax()
The following example demonstrates specifying grid columns using minmax()
<html> <head> <style> body { background-color: #f4f4f4; font-family: 'Arial', sans-serif; margin: 0; justify-content: center; align-items: center; height: 100vh; } #customGrid { height: 300px; display: grid; gap: 20px; background-color: #c8cfcc; padding: 20px; grid-template-columns: minmax(50px, 0.5fr) minmax(150px, 1fr) minmax(50px, 0.8fr); border-radius: 10px; } #customGrid div { background-color: #2c3e50; color: #ecf0f1; text-align: center; padding: 10px; font-size: 20px; border-radius: 5px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } </style> </head> <body> <h1>The grid-template-columns with minmax(min, max) Values</h1> <div id="customGrid"> <div class="boxA">Alpha Element with some content</div> <div class="boxB">Beta Element</div> <div class="boxC">Gamma Element</div> <div class="boxD">Delta Element</div> <div class="boxE">Theta Element</div> <div class="boxF">Lambda Element some content</div> </div> </body> </html>
CSS grid-template-columns - Using repeat()
The following example demonstrates specifying grid column sizes using repeat function.
<html> <head> <style> /* Apply styles to the grid container */ #grid { display: grid; width: 100%; grid-template-columns: repeat(4, 1fr); /* Four columns of equal width */ grid-template-rows: 50px 100px 150px ; /* Three rows of different height */ gap: 10px; /* Gap between grid items */ } /* Styles for individual grid items */ .area { display: flex; align-items: center; justify-content: center; font-size: 1.5em; color: white; } /* Specify background colors for different areas */ #demo-areaA { background-color: #3498db; /* Blue */ grid-column: 1 / span 2; /* Spans 2 columns */ grid-row: 1 / span 1; /* Spans 1 row */ } #demo-areaB { background-color: #e74c3c; /* Red */ grid-column: 3 / span 2; /* Spans 2 columns */ grid-row: 1 / span 1; /* Spans 1 row */ } #demo-areaC { background-color: #2ecc71; /* Green */ grid-column: 1 / span 4; /* Spans 4 columns */ grid-row: 2 / span 1; /* Spans 1 row */ } #demo-areaD { background-color: #f39c12; /* Orange */ grid-column: 2 / span 1; /* Spans 1 column */ grid-row: 3 / span 1; /* Spans 1 row */ } #demo-areaE { background-color: #9b59b6; /* Purple */ grid-column: 4 / span 1; /* Spans 1 column */ grid-row: 3 / span 1; /* Spans 1 row */ } </style> </head> <body> <div id="grid"> <div id="demo-areaA" class="area">One</div> <div id="demo-areaB" class="area">Two</div> <div id="demo-areaC" class="area">Three</div> <div id="demo-areaD" class="area">Four</div> <div id="demo-areaE" class="area">Five</div> </div> </body> </html>
CSS grid-template-colums - Using auto
In the following example, the grid container's column sizing is defined by the CSS rule grid-template-columns: auto auto auto;, which indicates that it should have three columns with an automatic width depending on the content within them.
This produces a grid layout in which the width of each column dynamically changes to accommodate the content.
<html> <head> <style> body { background-color: #F2F5F8; font-family: 'Arial', sans-serif; } #customGrid { height: 300px; display: grid; gap: 10px; background-color: #4CAF50; padding: 15px; grid-template-columns: auto auto auto; } #customGrid div { background-color: rgba(255, 255, 255, 0.9); text-align: center; padding: 30px 0; font-size: 24px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } </style> </head> <body> <h1>The grid-template-colum</h1> <div id="customGrid"> <div class="boxA">Alpha</div> <div class="boxB">Beta</div> <div class="boxC">Gamma</div> <div class="boxD">Delta</div> <div class="boxE">Theta</div> <div class="boxF">Lambda</div> </div> </body> </html>
To Continue Learning Please Login
Login with Google