Exploring CSS Grids: Creating Complex Layouts with Ease.
Grid Layout
CSS Grid Layout is a powerful layout system in CSS that allows you to create complex and responsive web layouts. It allows you to define a grid of rows and columns, and then place content into that grid. The content can span multiple rows or columns, and you can specify the size of each row or column as a fixed value, a percentage, or a fraction of the available space.
In this tutorial, we shall take a stepwise approach to understand how to create complex layouts by beginning with the basics and then building on them.
Grid Elements
Every grid layout typically begins with a parent element with one or multiple nested child elements. This is the element we will apply our CSS grid layout to.
Grid Display
We begin by making the parent element into a grid container by setting its “display” property to “grid” or inline-grid.
.grid-container{
display: grid;
}.grid-container {
display: inline-grid;
}Once this is done all the children of the parent container become grid items by default.
Grid Rows and Grid Columns
Rows refer to the horizontal arrangement of the grid items while Columns refer to the vertical arrangement of grid-items
Grid Gaps
Grid gaps refer to the spaces between grid items, whether they are rows or columns, in a CSS Grid layout. You can add gaps between rows and/or columns by using the “gap” property on the grid container element.
The “gap” property sets the size of the gap between the grid items, and it can be set to a single value to create equal gaps between all rows and columns, or multiple values to set different gaps for rows and columns.
Here are examples of how you can add a gap between rows and columns in a grid:
Using column-gap property:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 20px;}
In this example, we’re setting a fixed column gap of 20 pixels between each column in the grid container.
Using row-gap property:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto auto;
column-row: 10px;
In this example, we’re setting a fixed row gap of 10 pixels between each row in the grid container.
Using the shorthand gap property:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto auto;
gap: 20px 10px;
In this example, we’re using the shorthand gap property to set a 20-pixel gap between columns and a 10-pixel gap between rows.
By adjusting the values of these properties, you can control the spacing between rows and columns in your CSS Grid layout.
Grid lines
Grid lines are imaginary lines that define the rows and columns of a grid. You can use grid lines to position and align grid items in specific places on the grid.
Each row and column of a grid has two grid lines: a start line and an end line. The start line is the line that comes before the first grid item in the row or column, while the end line is the line that comes after the last grid item in the row or column.
You can refer to these grid lines using a number, with the first line being 1, the second line being 2, and so on.
Grid Container
The grid container is that HTML element whose display property has been set to grid and as such houses all the grid items which will be arranged in rows and columns.
The grid-template-columns Property
The “grid-template-columns” property is used to define the columns of a grid within a grid container.
It specifies the width and number of columns in the grid.
It can be set to a single value, a space-separated list of values, or a repeat function.
Here are some examples of how to use the “grid-template-columns” property:
/* set three columns of equal width*/
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
/* set two columns with fixed widths and one column that takes up the remaining space */
.grid-container {
display: grid;
grid-template-columns: 200px 100px 1fr;
}
/* set a variable number of columns with a fixed width using the repeat function */
.grid-container {
display: grid;
grid-template-columns: repeat(4, 100px);
}In the first example, we set three columns of equal width using the “1fr” value. This means that each column takes up one-third of the available space in the grid container.
In the second example, we set two columns with fixed widths of 200 pixels and 100 pixels respectively, and a third column that takes up the remaining space using the “1fr” value.
In the third example, we use the “repeat” function to create four columns of fixed width, each with a width of 100 pixels.
You can also use other units of measurement such as pixels, percentages, or ems to set the width of columns, as well as minmax() function to define a range of acceptable sizes for columns.
The “grid-template-columns” property is an essential tool for creating custom layouts with CSS Grid. It allows you to define the columns of a grid and set their size and width, giving you complete control over the appearance and behavior of your grid layout.
The grid-template-rows Property
The “grid-template-rows” property is used to define the rows of a grid within a grid container.
It specifies the width and number of rows in the grid.
It can be set to a single value, a space-separated list of values, or a repeat function.
.grid-container {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
}
/* set two rows with fixed heights and one row that takes up the remaining space */
.grid-container {
display: grid;
grid-template-rows: 200px 100px 1fr;
}
/* set a variable number of rows with a fixed width using the repeat function */
.grid-container {
display: grid;
grid-template-rows: repeat(4, 100px);
}In the first example, we set three rows of equal height using the “1fr” value. This means that each row takes up one-third of the available space in the grid container.
In the second example, we set two rows with fixed heights of 200 pixels and 100 pixels respectively, and a third row that takes up the remaining space using the “1fr” value.
In the third example, we use the “repeat” function to create four rows of fixed height, each with a height of 100 pixels.
The justify-content Property
The “justify-content” property is used to align grid items along the horizontal axis of a grid container. It defines the distribution of space between and around the grid items within the grid container.
The “justify-content” property can be set to several values, including:
.container {
display: grid;
justify-content: start;
}“end”: Aligns items to the right of the grid container.
.container {
display: grid;
justify-content: end;
}“start”: Aligns items to the left of the grid container.
.container {
display: grid;
justify-content: center;
}“center”: Aligns items in the center of the grid container.
.container {
display: grid;
justify-content: space-between;
}“space-between”: Distributes items evenly in the grid container with the first item aligning to the start and the last item aligning to the end.
.container {
display: grid;
justify-content: space-around;
}“space-around”: Distributes items evenly in the grid container with equal space around each item.
.container {
display: grid;
justify-content: space-evenly;
}“space-evenly”: Distributes items evenly in the grid container with equal space between and around each item.
The “align-content” Property
The “align-content” property is used to align the grid items along the vertical axis of the grid container. It controls the distribution of space between the grid rows and is only applied when there is extra space in the grid container.
The “align-content” property can take several values that affect the vertical alignment of the grid items:
.container {
display: grid;
align-content: stretch;
}“stretch” (default): This value stretches the grid items to fill the available height of the grid container.
.container {
display: grid;
align-content: center;
}“center”: This value centers the grid items vertically in the grid container.
.container {
display: grid;
align-content: start;
}
“start”: This value aligns the grid items with the start of the grid container (the top edge in a vertical layout).
.container {
display: grid;
align-content: end;
}“end”: This value aligns the grid items with the end of the grid container (the bottom edge in a vertical layout).
.container {
display: grid;
align-content: space-between;
}“space-between”: This value evenly distributes the extra space between the grid rows.
.container {
display: grid;
align-content: space-around;
}“space-around”: This value evenly distributes the extra space around the grid rows, including at the top and bottom of the grid container.
.container {
display: grid;
align-content: space-evenly;
}“space-evenly”: This value evenly distributes the extra space between and around the grid rows.
Grid items
The elements that are placed inside a grid container are called grid items. When placed inside a grid container, there is one grid item for each column, in each row, however, the grid items can be positioned within more than one grid columns and/or rows.
Grid items can be any HTML element, such as a text block, an image, or a form field.
The grid-column Property
The “grid-column” property is used to specify the placement and span of a grid item along the horizontal axis of the grid.
It defines the starting and ending grid lines that the item occupies.
The “grid-column” property is actually a shorthand property for the “grid-column-start” and “grid-column-end” properties in CSS Grid.
Instead of setting the starting and ending grid lines separately, you can use the “grid-column” property to set them both at once. For example, setting “grid-column: 2 / 4” is equivalent to setting “grid-column-start: 2” and “grid-column-end: 4”.
/* Set the starting and ending grid lines for an item */
.item {
grid-column: 2/4;
}
/* Set the starting grid line and span the item over 2 tracks */
.item {
grid-column: 2 / span 2;
}
/* Set the item to start at the first available grid cell and end at grid line 3 */
.item {
grid-column: auto /3;
}In the first example, the .item class is used to target a grid item in a CSS Grid layout. The grid-column property is set to 2 / 4, which means the item starts at grid line 2 and ends at grid line 4 along the horizontal axis.
In the second example, the span keyword is used with the grid-column property to specify that the item should start at grid line 2 and span two grid tracks along the horizontal axis.
In the third example, the auto value is used with the grid-column-start property to automatically place the item in the first available grid cell along the horizontal axis, and the grid-column-end property is set to 3, which means the item ends at grid line 3 along the horizontal axis.
The grid-row Property
The “grid-row” property is used to specify the placement and span of a grid item along the vertical axis of the grid.
It defines the starting and ending grid lines that the item occupies.
The “grid-row” property is actually a shorthand property for the “grid-row-start” and “grid-row-end” properties in CSS Grid.
Instead of setting the starting and ending grid lines separately, you can use the “grid-row” property to set them both at once. For example, setting “grid-row: 2 / 4” is equivalent to setting “grid-row-start: 2” and “grid-row-end: 4”.
Try it yourself.
The grid-area Property
The “grid-area” property is a shorthand property that allows you to set all of the grid item placement properties at once: “grid-row-start”, “grid-column-start”, “grid-row-end”, and “grid-column-end”.
You can specify a single value to represent all four of these properties, separated by slashes (/). The order of the values is row-start, column-start, row-end, column-end. Notice that this is a counter-clockwise movement around the grid-item box.
Here’s an example of how to use the “grid-area” property:
For the first grid item, we have assigned the grid area value using grid-column-start: 1 and grid-column-end: 3 to indicate that it should span the first three column lines. Additionally, we have used grid-row-start: 1 and grid-row-end: 3 to indicate that it should span the first three row lines. Using the grid-area property:
.item1 {
grid-area: 1 / 1 / 3 / 3.
}The second grid item has been assigned the grid area value using grid-column-start: 3 and grid-column-end: 5 to indicate that it should span columns 3 through 5. We have also used grid-row-start: 1 and grid-row-end: 3 to indicate that it should span the first three row lines.
Using the grid-area property:
.item2 {
grid-area: 1 / 3 / 3 / 5;
}The third grid item has been assigned the grid area value using grid-column-start: 1 and grid-column-end: 5 to indicate that it should span all five column lines. We have also used grid-row-start: 3 and grid-row-end: 5 to indicate that it should span row lines 3 through 5.
Using the grid-area property:
.item1 {
grid-area: 3 / 1 / 5 / 5;
}Naming Grid Items
The grid-area property can also be used to assign names to grid items.
Named grid items can be referred to by the grid-template-areas property of the grid container.
Examples:
Each row in the grid is defined using apostrophes (‘ ‘), with the columns for that row separated by spaces within the apostrophes. To represent a grid item with no name, a period sign (.) is used.
Examples:
You can make a webpage template using this method
The Position of the Items
With the Grid Layout, we have the ability to place the items at any desired position.
The position of the first item in the HTML code can be different from its position in the grid layout.
Example:
It is possible to alter the item order for specific screen sizes by utilizing media queries.
Wrapping Up
In conclusion, CSS Grid Layout is a powerful tool that enables developers to create complex and responsive web layouts easily. With its flexible and customizable grid system, you can create layouts that adapt to different screen sizes and devices, while maintaining the visual hierarchy of your content. By understanding the basics of CSS Grid Layout such as creating grid elements, defining grid rows and columns, setting grid gaps, using grid lines, and utilizing properties like grid-template-columns, grid-template-rows, justify-content, and align-items, you can create beautiful and dynamic layouts for your web projects.
Although CSS Grid Layout may seem complex at first, with practice and experimentation, you can master this layout system and create stunning layouts that provide a seamless user experience across different devices. So, start experimenting with CSS Grid Layout today and take your web design skills to the next level!
