grid-row property is a part of CSS Grid Layout, a powerful tool for creating complex web layouts. CSS Grid allows you to divide a web page into rows and columns, making it easier to place and align elements. The grid-row property is specifically used to control the vertical placement of grid items by specifying which row(s) an item should occupy.
Understanding grid-row
The grid-row property is shorthand for two properties:
1. grid-row-start: Specifies the starting row line for a grid item.
2. grid-row-end: Specifies the ending row line for a grid item.
Syntax
grid-row: <start-line> / <end-line>;
1. <start-line>: This defines on which grid row line the item should start.
2. <end-line>: This defines on which grid row line the item should end.
Imagine you have a grid with multiple rows, and you want a particular item to span across certain rows. You can use the grid-row property to control this. The rows are defined by grid lines, which are essentially imaginary lines that separate each row.
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>Grid Row Example</title> <style> .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 100px); gap: 10px; border: 2px solid #000; padding: 10px; } .grid-item { background-color: lightcoral; text-align: center; padding-top: 40px; font-size: 1.5em; font-weight: bold; } .grid-item:nth-child(1) { grid-row: 1 / 3; /* Starts on row line 1, ends on row line 3 */ } </style> </head> <body> <div class="grid-container"> <div class="grid-item">Item 1 (Spans rows 1-2)</div> <div class="grid-item">Item 2</div> <div class="grid-item">Item 3</div> <div class="grid-item">Item 4</div> <div class="grid-item">Item 5</div> <div class="grid-item">Item 6</div> </div> </body> </html>
Using the span keyword
The span keyword is another powerful feature of the CSS Grid Layout that simplifies specifying the number of rows (or columns) an item should span. Instead of manually calculating the start and end lines, you can use span to indicate how many rows a grid item should occupy from its starting point.
grid-row: <start-line> / span <number-of-rows>;
1. <start-line>: This defines the starting grid row line for the item.
2. span <number-of-rows>: This defines how many rows the item should span starting from the <start-line>.
hello-world-span.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Grid Row Example</title> <style> .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 100px); gap: 10px; border: 2px solid #000; padding: 10px; } .grid-item { background-color: lightcoral; text-align: center; padding-top: 40px; font-size: 1.5em; font-weight: bold; } .grid-item:nth-child(1) { grid-row: 1 / span 2; /* Starts on row line 1, span two lines */ } </style> </head> <body> <div class="grid-container"> <div class="grid-item">Item 1 (Spans rows 1-2)</div> <div class="grid-item">Item 2</div> <div class="grid-item">Item 3</div> <div class="grid-item">Item 4</div> <div class="grid-item">Item 5</div> <div class="grid-item">Item 6</div> </div> </body> </html>
No comments:
Post a Comment