The grid-column property in CSS is a powerful tool for managing the layout of elements within a CSS Grid container. It allows you to control how many columns an element spans and which column lines it starts and ends at.
Understanding CSS Grid and Grid Lines
Before diving into grid-column, it's essential to understand a few basics about CSS Grid.
1. Grid Container: This is the element that uses ‘display: grid;’ property to define a grid-based layout. The container has a series of rows and columns, forming a grid.
2. Grid Items: These are the children of the grid container. Each item is placed in the grid according to the rules you set.
3. Grid Lines: The lines that define the boundaries between the rows and columns. These lines are numbered starting from 1. For example, if you have a grid with 3 columns, you'll have 4 vertical grid lines (1, 2, 3, and 4).
Example
| Column 1 | Column 2 | Column 3 |
The grid-column Property
The grid-column property is shorthand for grid-column-start and grid-column-end. It controls where a grid item starts and ends on the grid's columns.
1. grid-column-start: Specifies on which grid line the item will start.
2. grid-column-end: Specifies on which grid line the item will end.
Syntax
grid-column: <start-line> / <end-line>;
hello-world.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Grid Example</title> <style> .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */ gap: 10px; /* Spacing between items */ height: 200px; border: 1px solid black; } .style-text{ text-align: center; padding-top: 30px; margin: 10px; font-size: 1.2em; font-weight: bold; } .item1 { background-color: lightcoral; grid-column: 1 / 3; /* Starts at line 1 and ends at line 3 */ } .item2 { background-color: lightblue; grid-column: 3 / 4; /* Starts at line 3 and ends at line 4 */ } .item3 { background-color: lightgreen; grid-column: 1 / 2; /* Starts at line 1 and ends at line 2 */ } .item4 { background-color: lightsalmon; grid-column: 2 / 4; /* Starts at line 1 and ends at line 2 */ } </style> </head> <body> <div class="grid-container"> <div class="item1 style-text">Item 1</div> <div class="item2 style-text">Item 2</div> <div class="item3 style-text">Item 3</div> <div class="item4 style-text">Item 4</div> </div> </body> </html>
Specify how many columns the grid item should span
‘span n’ indicates how many columns the grid item should span.
Example
grid-column: 1 / span 2;
· 1 (Grid Line Start): The grid item will start at the first vertical grid line of the grid container.
· span 2 (Column Span): The term span 2 tells the grid item to span across two columns, starting from the line defined by grid-column-start. This means that, starting at line 1, the item will cover two columns, reaching up to the grid line that is two lines away from the start (in this case, line 3).
Let’s rewrite above example using span.
using-span.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Grid Example</title> <style> .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */ gap: 10px; /* Spacing between items */ height: 200px; border: 1px solid black; } .style-text{ text-align: center; padding-top: 30px; margin: 10px; font-size: 1.2em; font-weight: bold; } .item1 { background-color: lightcoral; grid-column: 1 / span 2; /* Starts at line 1 and ends at line 3 */ } .item2 { background-color: lightblue; grid-column: 3 / span 1; /* Starts at line 3 and ends at line 4 */ } .item3 { background-color: lightgreen; grid-column: 1 / span 1; /* Starts at line 1 and ends at line 2 */ } .item4 { background-color: lightsalmon; grid-column: 2 / span 2; /* Starts at line 1 and ends at line 2 */ } </style> </head> <body> <div class="grid-container"> <div class="item1 style-text">Item 1</div> <div class="item2 style-text">Item 2</div> <div class="item3 style-text">Item 3</div> <div class="item4 style-text">Item 4</div> </div> </body> </html>
Above snippet also generate the same screen.
No comments:
Post a Comment