The grid-column Property
The grid-column property in CSS describes the range of columns that a grid item takes inside the grid container. The property grid-columns value defines the starting and ending position of the grid items along the x-axis (horizontally). The values can be given in two ways including span and the column lines.
The following table illustrates the two ways to give grid-column property value along with syntax and description.
|
Syntax |
Descriptions |
| grid-column: 1/3 | The values are defined as spans from the first column line to the third column line. |
| grid-column: 1/span 2 | The values are defined as from the first column line and span across three columns. |
Example 1: The example illustrates a grid-column Property item 5 that starts with the second column line and ends on the fourth column line.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="containergrid"> <div class="box" id="box1">grid_Item1</div> <div class="box" id="box2">grid_Item2</div> <div class="box" id="box3">grid_Item3</div> <div class="box" id="box4">grid_Item4</div> <div class="box" id="box5">grid_Item5</div> <div class="box" id="box6">grid_Item6</div> <div class="box" id="box7">grid_Item7</div> <div class="box" id="box8">grid_Item8</div> <div class="box" id="box9">grid_Item9</div> <div class="box" id="box10">grid_Item10</div> </div> </body> </html> |
CSS
.containergrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; background-color: rgb(159, 206, 159) } #box5 { grid-column: 2/4; background-color: rgb(73, 147, 122); color: antiquewhite; } .containergrid>div { padding: 10px; font-size: 20px; } .box { border: 2px solid green; } |
Output:
Output
Example 2: The example illustrates grid-column Property item 5 starts with the first column line and spans to two columns
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="containergrid"> <div class="box" id="box1">grid_Item1</div> <div class="box" id="box2">grid_Item2</div> <div class="box" id="box3">grid_Item3</div> <div class="box" id="box4">grid_Item4</div> <div class="box" id="box5">grid_Item5</div> <div class="box" id="box6">grid_Item6</div> <div class="box" id="box7">grid_Item7</div> <div class="box" id="box8">grid_Item8</div> <div class="box" id="box9">grid_Item9</div> <div class="box" id="box10">grid_Item10</div> </div> </body> </html> |
CSS
.containergrid { display: grid; grid-template-columns: repeat(4, auto); gap: 10px; background-color: rgb(159, 206, 159) } #box5 { grid-column: 1/ span 2; background-color: rgb(73, 147, 122); color: antiquewhite; } .containergrid>div { padding: 10px; font-size: 20px; } .box { border: 2px solid green; } |
Output:
CSS Grid Items
CSS Grid Items are contained in the Grid Container, where for each row, the container will contain one grid item for each column, by default. The Grid Items can also be styled, which will span in multiple columns and/or rows.
Grid Item is a no of child boxes wrapped inside the grid container. There are various properties including, grid-column property, grid-row property, grid-area property, naming grid, and order of the items. These grid items are responsive and work well on all screen sizes.
Table of Content
- The grid-column Property
- The grid-row Property
- The grid area property
- Naming Grid items
- Order of the items