In this CSS article we want to talk about CSS Grid Tutorial, CSS Grid is powerful layout tool that allows you to create complex and responsive layouts with easy. in this article we want to talk about the basics of CSS Grid and show you how to create simple grid layout.
What is CSS Grid ?
CSS Grid is two dimensional layout system that allows you to create complex layouts with easiness. it is made up of a grid container and grid items. grid container is the element that contains grid items and defines the grid. grid items are the elements that are laid out on the grid.
For creating grid layout you need to define grid container and specify the number of rows and columns in the grid. you can do this using grid template rows and grid template columns properties. for example:
|
1 2 3 4 5 |
.grid-container { display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); } |
In this example we have created grid container with three rows and three columns using the repeat() function to specify the number of rows and columns. 1fr unit is used to specify that each row and column should take up an equal amount of space.
After that you have defined the grid container you can add grid items to the grid. for this you need to specify the location of the grid item using the grid row and grid column properties. for example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
.grid-item-1 { grid-row: 1 / 2; grid-column: 1 / 2; } .grid-item-2 { grid-row: 1 / 2; grid-column: 2 / 3; } .grid-item-3 { grid-row: 1 / 2; grid-column: 3 / 4; } .grid-item-4 { grid-row: 2 / 3; grid-column: 1 / 2; } .grid-item-5 { grid-row: 2 / 3; grid-column: 2 / 3; } .grid-item-6 { grid-row: 2 / 3; grid-column: 3 / 4; } .grid-item-7 { grid-row: 3 / 4; grid-column: 1 / 4; } |
In this example we have created seven grid items and specify their location using the grid row and grid column properties. values for these properties are specified using the row-start / row-end and column-start / column-end syntax. for example grid-row: 1 / 2 specifies that the grid item should span from row 1 to row 2.
Also when you have created your grid layout and added your grid items you can style them as you would any other element. for example:
|
1 2 3 4 5 |
.grid-item { background-color: #ddd; padding: 20px; text-align: center; } |
One of the great things about CSS Grid is that it makes it easy to create responsive layouts. to make the grid responsive you can use media queries to change the number of columns in the grid based on the screen size. for example:
|
1 2 3 4 5 |
@media (max-width: 768px) { .grid-container { grid-template-columns: repeat(2, 1fr); } } |
This is the complete code with HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS Grid Tutorial</title> <style> .grid-container { display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); } .grid-item-1 { grid-row: 1 / 2; grid-column: 1 / 2; } .grid-item-2 { grid-row: 1 / 2; grid-column: 2 / 3; } .grid-item-3 { grid-row: 1 / 2; grid-column: 3 / 4; } .grid-item-4 { grid-row: 2 / 3; grid-column: 1 / 2; } .grid-item-5 { grid-row: 2 / 3; grid-column: 2 / 3; } .grid-item-6 { grid-row: 2 / 3; grid-column: 3 / 4; } .grid-item-7 { grid-row: 3 / 4; grid-column: 1 / 4; } .grid-item { background-color: #ddd; padding: 20px; text-align: center; } @media (max-width: 768px) { .grid-container { grid-template-columns: repeat(2, 1fr); } } </style> </head> <body> <div class="grid-container"> <div class="grid-item grid-item-1">1</div> <div class="grid-item grid-item-2">2</div> <div class="grid-item grid-item-3">3</div> <div class="grid-item grid-item-4">4</div> <div class="grid-item grid-item-5">5</div> <div class="grid-item grid-item-6">6</div> <div class="grid-item grid-item-7">7</div> </div> </body> </html> |
This will be the result
