- 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 Property
CSS grid-template is a shorthand property that specifies the grid columns, grid rows and grid areas.
The grid-template property is a shorthand for the following individual grid-related properties:
Possible Values
none − Default value. The grid will be created automatically based on the the grid-auto-rows and grid-auto-columns properties.
<grid-template-rows> / <grid-template-columns> − The grid-template-rows and grid-template-columns are set to the specified values, while grid-template-areas is set to none.
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ /<explicit-track-list> ]? − Sets the grid layout by defining grid-template-areas, grid-template-rows, and grid-template-columns using specified strings. Also, create named lines before and after each row size.
You can't use the repeat() function in these track listings because the tracks must match the rows and columns in "ASCII art" exactly.
The grid shorthand property works same as the grid-template property and resets implicit grid properties to their default values. You can use grid instead of grid-template to avoid separate cascading of these values.
Applies to
Grid containers.
DOM Syntax
object.style.gridTemplate = "none|<grid-template-rows> / <grid-template-columns>|[ <line-names>? <string> <track-size>? <line-names>? ]+ [ /<explicit-track-list> ]?";
CSS grid-template - none Value
The following example demonstartes that grid-template: none property automatically arranges the rows and columns based on the content −
<html> <head> <style> .grid-container { display: grid; grid-template: none; color: white; text-align: center; width: 360px; background-color: lightgreen; } .grid-container > div { background-color: red; border: 2px solid lightgreen; padding: 5px; } </style> </head> <body> <div class="grid-container"> <div>Grid item 1</div> <div>Grid item 2</div> <div>Grid item 3</div> <div>Grid item 4</div> </div> </body> </html>
CSS grid-template - <grid-template-rows> / <grid-template-columns>
The following example demonstrates the grid layout with two rows with heights of 100px and 50px and two columns with widths of 150px and 300px.
<html> <head> <style> .grid-container { display: grid; grid-template: 100px 50px / 150px 300px; color: white; text-align: center; background-color: lightgreen; } .grid-container > div { background-color: red; border: 2px solid lightgreen; padding: 5px; } </style> </head> <body> <div class="grid-container"> <div>Grid item 1</div> <div>Grid item 2</div> <div>Grid item 3</div> <div>Grid item 4</div> </div> </body> </html>
CSS grid-template - Template Design
The following example demonstartes a responsive and structured web page layout. The grid layout contains navbar, left and right sections, and a footer −
<html> <head> <style> .navbar { background-color: lightgreen; grid-area: nav; } .left { background-color: pink; grid-area: left; } .right { background-color: violet; grid-area: right; } .footer { background-color: lightgreen; grid-area: footer; } .grid-box { display: grid; width: 100%; height: 300px; grid-template: "nav nav" 40px "right left" 200px "footer footer" 40px; padding: 5px; } </style> </head> <body> <div class="grid-box"> <div class="navbar">Navbar</div> <div class="left">Left Section</div> <div class="right">Right Section</div> <div class="footer">Footer</div> </div> </body> </html>
CSS grid-template - Related Properties
Following is the list of CSS properties related to grid-template property:
property | value |
---|---|
grid-template-columns | Specifies the names of grid lines and functions that determine the size of the grid columns. |
grid-template-rows | Specifies the names of grid lines and functions that determine the size of the grid rows. |
grid-template-area | specifies the names of grid lines and functions that determine the size of the grid areas. |
To Continue Learning Please Login
Login with Google