--- title: "Implementing CSS Grid Layouts" description: "CSS Grid Layouts involves using the CSS Grid Layout module to create two-dimensional grid-based layouts in web pages." author: "Ravi Vishwakarma" published: 2024-06-05 updated: 2024-06-05 canonical: https://www.mindstick.com/blog/304309/implementing-css-grid-layouts category: "css-css3" tags: ["css-css3", "css"] reading_time: 5 minutes --- # Implementing CSS Grid Layouts [CSS Grid](https://www.mindstick.com/articles/336043/css-grid-advanced-techniques) Layout is a powerful **two-dimensional** grid-based layout system that allows you to create **complex** web layouts with ease. It's a module of CSS that provides [developers](https://www.mindstick.com/blog/302688/handling-errors-in-rust-a-comprehensive-guide-for-developers) with a method of creating grid structures for [web page](https://www.mindstick.com/forum/718/sql-server-report-alignment-to-center-of-web-page) layouts. Here's a breakdown of its key features: - **Grid Container:** The [parent element](https://www.mindstick.com/forum/156679/select-any-parent-element-of-any-tag-via-jquery) that holds all the grid items. - **Grid Items:** The children of the grid container that are placed within the grid. - **Grid Lines:** The horizontal and vertical lines that divide the grid into [rows and columns](https://www.mindstick.com/forum/161180/how-to-compare-rows-and-columns-in-sql-server-database). - **Grid Tracks:** The spaces between the grid lines, fomenting the rows and columns. - **Grid Cells:** The individual units of the grid formed by the [intersection](https://www.mindstick.com/blog/144/union-intersection-and-except-operator-in-sql-server) of a row and a column. - **Grid Area:** The total space surrounded by four grid lines. With CSS Grid Layout, you can precisely control the layout of elements on a webpage, arranging them in rows and columns. It offers a more flexible and efficient way of designing [responsive layouts](https://www.mindstick.com/forum/158679/what-are-the-key-differences-between-css-flexbox-and-css-grid-for-creating-responsive-layouts) compared to older methods like floats or positioning. ### 1. Define a Grid Container: To create a grid layout, you first need to define a grid container using the `display: grid;` property. ```css .container { display: grid; } ``` ### 2. Specify Grid Rows and Columns: Define the structure of the grid by specifying the number and size of rows and columns using the `grid-template-rows` and `grid-template-columns` properties. ```css .container { display: grid; grid-template-rows: 100px 200px; /* Define two rows, one 100px tall and one 200px tall */ grid-template-columns: 1fr 2fr; /* Define two columns, the first one occupying 1 fraction of available space, the second one occupying 2 fractions */ } ``` ### 3. Place Items in the Grid: Place items within the grid using the `grid-row` and `grid-column` properties, or shorthand `grid-area`, specifying the starting and ending positions of the grid lines. ```css .item { grid-row: 1 / span 2; /* Item spans 2 rows starting from row line 1 */ grid-column: 1 / 2; /* Item starts at column line 1 and ends at column line 2 */ } ``` ### 4. Additional Grid Properties: You can also use various grid properties to control the layout and behavior of grid items: - `grid-gap`: Specifies the gap between rows and columns. - `grid-template-areas`: Allows you to define named grid areas and assign items to those areas. - `grid-auto-rows` **and** `grid-auto-columns`: Defines the size of rows and columns that are not explicitly defined. - `justify-items` **and** `align-items`: Aligns items within grid cells [horizontally and vertically](https://www.mindstick.com/forum/158678/how-can-center-align-an-element-both-horizontally-and-vertically-using-css). - `justify-content` **and** `align-content`: Aligns the grid itself within its container horizontally and vertically. ### Example: Here's a simple example of implementing a grid layout: ## HTML(index.html) ```html CSS Grid Layout Example
Item 1
Item 2
Item 3
Item 4
``` ## CSS (styles.css): ```css .container { display: grid; grid-template-rows: 100px 200px; /* Two rows, one 100px tall, one 200px tall */ grid-template-columns: 1fr 2fr; /* Two columns, first one occupies 1 fraction of available space, second one occupies 2 fractions */ grid-gap: 10px; /* Gap between grid items */ } .item { background-color: #3498db; color: #fff; padding: 20px; text-align: center; } .item1 { grid-row: 1 / span 2; /* Item 1 spans 2 rows */ grid-column: 1 / 2; /* Item 1 starts at column 1 and ends at column 2 */ } .item2 { grid-row: 1 / 2; /* Item 2 starts at row 1 and ends at row 2 */ grid-column: 2 / 3; /* Item 2 starts at column 2 and ends at column 3 */ } .item3 { grid-row: 2 / 3; /* Item 3 starts at row 2 and ends at row 3 */ grid-column: 1 / span 2; /* Item 3 spans 2 columns */ } .item4 { grid-row: 2 / 3; /* Item 4 starts at row 2 and ends at row 3 */ grid-column: 2 / 3; /* Item 4 starts at column 2 and ends at column 3 */ } ``` ### Explanation: - We start with a simple HTML structure containing a `.container` div with four `.item` divs. - In the CSS, we define the `.container` as a grid container with two rows and two columns using `grid-template-rows` and `grid-template-columns`. - Each `.item` is styled with a [background color](https://www.mindstick.com/forum/12937/how-to-style-togglebutton-so-that-the-background-color-is-white), padding, and centered text. - We use various grid properties like `grid-row` and `grid-column` to position each item within the grid. - For example, `item1` spans two rows and starts at the first column and ends at the second column. - Similarly, `item2` starts at the first row and ends at the second row, and so on. ### Result: The result is a grid layout with four items positioned according to the specified row and column definitions. Each item is styled with a background color, padding, and centered text. The grid layout provides a structured way to arrange and [align elements](https://www.mindstick.com/forum/158037/how-can-i-vertically-align-elements-in-a-div) on the web page, making it easier to create complex and responsive layouts. --- Original Source: https://www.mindstick.com/blog/304309/implementing-css-grid-layouts Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.