CSS Grid Layout is a two-dimensional layout system for developing responsive webpages. In this tutorial we will learn how to design a webpage layout using grid systems.
What is a Grid Layout?
Grid Layout used to enhance user experience over all the user devices by providing a responsive and flexible arrangement of HTML components over the webpage.
Grid is ideal for creating overall layout of a webpage, while flexbox is mostly used to align items inside a container.
Table of Contents
Grid Elements
Display Grid Property
Grid Rows and Columns
Grid Gap
Grid Lines
CSS Grid Properties Reference
Grid Elements
In a grid layout system, we have two elements, Grid Container and Grid Item.
Grid Container
Grid container defines the outer element of grid, where all the child elements are present. A grid container can be defined by setting display: grid or display: inline-grid
Grid items
Grid items are all the direct elements inside grid container. This items can be arranged vertically and horizontally inside flexbox container based on need.
Display Grid Property
A HTML element become a grid container if we set value of display property as grid or inline-grid. All direct children of the grid container automatically become grid items.
grid: This value defines block level grid container, means it behave like a block element taking full width available. ( Similar to div )
inline-grid: This value defines inline level grid container, means it behave like a inline element taking as much width as it’s content. ( Similar to span )
Example
Following example show the difference between grid and inline-grid
Here is an example of
<span class="inline-grid-container"><span class="grid-item">1</span><span class="grid-item">2</span><span class="grid-item">3</span></span>
inline grid.
In CSS, we can define the number of columns and rows required in our layout. Each cell will represent a grid item. Following code shows how to define rows and columns in grid.
Example
In this example we will create two grid layout one is for row and another one is for column, each grid has row and column but showing them individually will help you to crack the rows and columns.
The grid gap properties are used to add gaps between rows and columns of grid items. We have three properties associated with this, gap, column-gap and row-gap.
The gap property can set equal gap for both row and column, while row-gap and column-gap can set different gap values for row and column. Row value and column value have more preference over gap value, so if we define all three row value and column value will override over gap value.
Example
Here in this example we tried to explain the gap between grid items.
/* Sets both row and column gaps to 20px */
gap: 20px;
/* Make gap between rows as 10px (override) */
row-gap: 10px;
/* Make gap between columns as 5px (override) */
column-gap: 5px;
}
.grid-item {
background-color: #4CAF50;
border: 1px solid #ddd;
padding: 20px;
text-align: center;
font-size: 1.2em;
color: white;
}
</style></head><body><h1>Grid Gap Example</h1><div class="grid-container"><div class="grid-item">
In CSS, Grid items can be placed according to the imaginary ines between grid cell called grid items. The lines between columns are called column lines and lines between rows are called row lines.
CSS Grid Properties Reference
Following is the list of CSS properties related to grid:
property
value
Example
display
Define whether an element is a grid container or an inline grid container.
Try It
gap
Defines the gap between rows and columns.
Try It
grid-area
Defines the location and size of the grid item within a grid layout.
Try It
grid-column
Control the placement of a grid item within the grid container in the column direction.
Try It
grid-row
Control the placement of a grid item within the grid container in the row direction.
Try It
grid-template
Specify the grid columns, grid rows and grid areas.
Try It
grid-auto-columns
Determines the size of automatically generated grid column tracks or a pattern of such tracks.
Try It
grid-auto-rows
Determines the size of automatically- generated grid rows tracks or a pattern of such tracks.
Try It
grid-auto-flow
Specifies arrangement of the grid item within the grid.
CSS grid property is a shorthand property used to declare all explicit and implicit grid properties in one declaration. It’s a convenient and concise way to define the grid layout of an element. The grid property is a shorthand for the following individual grid-related properties: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-columns, grid-auto-flow and grid-auto-rows
It specifies how to place auto-placed items, the auto size of the rows, and specifies the number of columns with their width.
initial
It sets the property to its initial value.
inherit
It inherits the property from the parent element.
Examples of CSS Grid Property
The following examples explain the grid property with different values.
Grid Property with Row Height and Column Width
To define rows and columns with their sizes in a grid layout, we specify the height values for rows and width values for columns, separated by a / (e.g. 10px 10px / 20px 20px specifies 2 rows of 10px height and 2 columns of 20px width) to the grid property. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>
.container {
display: grid;
grid: 150px 100px/ auto auto auto;
gap: 10px;
background-color: lightblue;
}
grid: 150px 100px / auto auto auto
</strong>;
There are two rows: first row's height is 150px,
second row's height is 100px. There are three
columns: all colums have auto width, meaning
they will be adjusted according to their
content.
To define sizes of certain portion of the grid layout such that elements can be placed in those portions, we provide names to the portions along with their size (e.g. "header header content content " indicates 2 rows and 2 columns) to the grid property. This is shown in the following example.
grid: "header header header header 100px
sidebar content content content 100px
footer footer footer footer 100px"
</strong>;
There are three rows and four columns. The header
is first row and takes four columns, sidebar and
content are second row and take single column
and 3 columns respectively and footer is third
column and takes all four columns. All rows
have 100px height.
</p><div class="container"><div class="item1">
This is header
</div><div class="item2">
This is sidebar
</div><div class="item3">
This is content
</div><div class="item4">
This is footer
</div></div></body></html></pre>
CSS adjacent sibling selector or next sibling selector selects an element that is immediately after another element. It is used to select only those elements which immediately follow the first selector. Both elements should share the same parent.
Syntax
The syntax for CSS adjacent sibling selectors is as follows:
In this example, the style is applied only to the p element which is just after the div element. The other p elements remain unaffected.
<!DOCTYPE html><html lang="en"><head><style>
div{
border: 2px solid #031926;
}
div + p {
color: #04af2f;
}
</style></head><body><p>
This paragraph is above the div
and will not be green.
</p><div><p>
This paragraph is inside a div
and will not be green..
</p></div><p>
This paragraph 1 after the div
and will be green..
</p><p>This paragraph 2 after the
div and will not be green..
</p></body></html></pre>
Example 2
In this example, we have used an adjacent sibling selector to design the p element just after the h3 tag having the same parent element i.e. div container.
<!DOCTYPE html><html><head><style>
.container {
padding: 20px;
border: 2px solid #031926;
font-family: Verdana, sans-serif;
}
h3 + p {
font-family: Verdana, sans-serif;
font-size: 20px;
font-style: italic;
background-color: #04af2f;
color: white;
}
</style></head><body><div class="container"><h3>This is an h3 tag</h3><p>
This is a p tag that immediately follows the h3 tag.
</p><p>
This is another p tag, but it does not immediately
after the h3 tag.
</p></div><p>This is a p tag which is outside the parent div element.</p></body></html></pre>
CSS general sibling selector ( “~” ) selects all the elements that are siblings of a specified element sharing the same parent. It will select all matching siblings, not just the one immediately following. A tilde ( “~” ) symbol is used to denote the general sibling.
Syntax
The syntax for CSS general sibling selectors is as follows:
In this example, we have used general sibling selector to change the text color of all p elements that are immediate siblings of the div element.
<!DOCTYPE html><html lang="en"><head><style>
div{
border: 2px solid #031926;
}
div ~ p {
color: #04af2f;
}
</style></head><body><p>
This paragraph is above the div
and will not be blue
</p><div><p>
This paragraph is inside a div
and will not be blue.
</p></div><p>
This paragraph 1 after the div
and will be blue.
</p><p>This paragraph 2 after the
div and will be blue.
</p></body></html></pre>
Example 2
In this example, we have used a general sibling selector to change the background color and font of all the p elements after the h3 tag.
<!DOCTYPE html><html><head><style>
.container {
padding: 20px;
border: 2px solid #031926;
font-family: Verdana, sans-serif;
}
h3 ~ p {
font-family: Verdana, sans-serif;
font-size: 20px;
font-style: italic;
background-color: #04af2f;
color: white;
}
</style></head><body><div class="container"><h3>This is an h3 tag</h3><p>
This is a p tag that immediately follows the h3 tag.
</p><p>
This is another p tag, but it is not immediately
after the h3 tag.
</p></div><p>This is a p tag which is outside the parent div element.</p></body></html></pre>
CSS descendant selector styles all the tags that are children of a particular specified tag. A single space between the parent element and child element is used to mention a descendant.
Syntax
The syntax for CSS descendant selectors is as follows:
In this example, we have set a border for all the p elements inside a div element. The p elements outside the div element will not have any styles applied to them.
div p {
border: 2px solid #04af2f;
}
</style></head><body><div><p>This is a p element inside a div.</p><p>This is second p element inside a div</p></div><p>This is a p element outside the div element.</p></body></html></pre>
Example 2
In this example, we have used CSS transition property with rotate() function of CSS transform property to rotate the written text of the div element with the class name container.
CSS element selectors are used to target and style specific HTML elements. These selectors are defined by simply using the element’s name in the stylesheet.
Syntax
The syntax for CSS element selectors is as follows:
element_name{/*property: value;*/color: red;}
Using Element Selectors Setting Background Color
To set the background color and text color of all <p> elements, use the element selector.
Example
The following example sets the background color and text color for all <p> elements.
p {
background-color: #04af2f;
color: white;
}
</style></head><body><p>Welcome to CSS Element Selectors</p><p>This is paragraph 1</p><p>This is paragraph 2</p></body></html></pre>
Using Element Selectors Setting Border
The element selector can be used to add a border to all <div> elements.
Example
The following example adds a border to all <div> elements.
div {
border: 3px solid #2a9d8f;
padding: 10px;
}
</style></head><body><div>Welcome to CSS Element Selectors</div><div>This is div 1</div></body></html></pre>
Using Element Selectors Setting Font
To apply a font style to all <li> elements, use the element selector.
Example
This example sets the font size and font family for all <li> elements.
CSS child selector selects all the direct children of a particular element. This is denoted by ‘>’ (Greater than) symbol. It will not select elements that are further nested inside the child elements.
In this example, we are changing the text color of the direct child element of div element. The para element inside the span tag remains unchanged as it is not a direct child of the div element.
</style></head><body><div class="myDiv"><p>It is a paragraph element. Direct child of div element.</p><span><p>This is a p element inside div but not direct child of div.</p></span></div><p>This is a p element outside div.</p></body></html></pre>
Example 2
In this example, we are changing the font size and font of the direct child element of the div element.
</style></head><body><div class="myDiv"><p>It is a paragraph element. Direct child of div element.</p><span><p>This is a p element inside div but not direct child of div.</p></span></div><p>This is a p element outside div.</p></body></html></pre>
CSS class selectors are used to select elements with a specific class attribute. The class selector is defined using a period (.) followed by the class name.
.container {
background-color: #04af2f;
color: white;
}
</style></head><body><p class="container">This is a paragraph with class.</p><p>This is a paragraph without class</p></body></html></pre>
Multiple Class Selectors
We can use multiple classes with any element. All the classes are separated by dot. It works only when all the class name matches.
Example
The following example adds a border and background color to div 1 and div 2 remains with default styles.
.bdr.bgColor {
border: 2px solid black;
background-color: #04af2f;
}
</style></head><body><div class="bdr bgColor">
This is div with background color and a border.
</div><br><div class="bdr">
This is div with default styles.
</div></body></html></pre>
Combining Class Selector with Other Selectors
Class selectors can be combined with other selectors to select specific elements.
Example
This example sets the font size and font family for only p elements having a class name container.
p.container {
font-size: 16px;
font-family: Verdana, sans-serif;
color: #04af2f;
}
</style></head><body><p class="container">This is a styled paragraph element.</p><div class="container">This is a div without any style.</div></body></html></pre>
Combining Multiple Classes
We can use multiple classes on any element to add different styles using different classes.
Example
Here is an example where we have used two different classes on div element to add a border and background color.
.bdr {
border: 1px solid black;
font-size: 16px;
font-family: Verdana, sans-serif;
}
.bgColor {
background-color: #04af2f;
color: white
}
</style></head><body><div class="bdr bgColor">
This is a div with a border and background color.
</div></body></html></pre>
Using Class Selectors with Media Queries
We can create a responsive design by using class selectors with media queries.
Example
Here is an example where the background color of the web changes depending on the screen size.
CSS group selector applies the same style to multiple elements at a time. The names of elements can be separated by commas. Group selector keeps CSS concise and avoids redundancy.
Syntax
The syntax for the CSS group selector is as follows:
span, #para, .myClass {
background-color: #04af2f;
color: white;
}
</style></head><body><p id="para">This is a paragraph element.</p><div class="myClass">This is a div element.</div><br><span>This is a span element.</span></body></html></pre>
Group Selectors Example with Pseudo-classes
In this example, we have used pseudo classes with group selectors. CSS :active pseudo-class changes the text color of the link and button on clicking while CSS :hover pseudo-class changes the background-color of the div and p element.
.myDiv:hover, #para:hover {
background-color: #031926;
color: white;
}
</style></head><body><div class="myDiv">
Hover over me
</div><p id="para">This is a paragraph.</p><a class="link" href="#">Click on this link.</a><br><br><button id="btn">Click me</button></body></html></pre>
CSS ID selector selects a single element with a particular value for the id attribute. An id in CSS is denoted by the “#” (hash) symbol. The same class can be applied to multiple elements, but an id is unique for an element.
Syntax
The syntax for the CSS id selector is as follows:
#id{/* property: value; */color: #04af2f
}
ID Selector for Styling a div Element
CSS ID selector can be used to select various elements such as div, p , section, etc.
Example
In this example, we have used an ID selector to style the div element. We have used background-color, color, padding, border, and text-align properties to style and center the text in the div element.
#myId {
background-color: #04af2f;
color: white;
font-size: 20px;
font-family: Verdana, sans-serif;
padding: 10px;
border: 1px solid black;
text-align: center;
}
</style></head><body><div id="myId">
This is a div element having various styles.
</div></body></html></pre>
ID Selector with Pseudo-Classes
CSS ID selector can be used with pseudo classes to add interactivity to the element such as changing text color on hovering any link.
Example
In this example, we have used hover pseudo-class to change the link text color upon hovering over it.
#myId:hover {
color: #031926;
}
</style></head><body><a href="#" id="myId">
Hover over this link to change its color.
</a></body></html></pre>
Using ID Selector with Forms
CSS ID selector can be used with forms to design the form elements.
Example
In this example, we have used an id selector on form elements like buttons and input fields. We have designed the input field and changed the appearance of the submit button.
CSS ID selector can be used with CSS animations for creating smooth animation effects.
Example
In this example, we have used an id selector to animate a bouncing ball. CSS keyframes specify the frame sequence and translateY() function of the transform property to control the bouncing of the ball.
