CSS Grid Layout is a powerful tool for creating two-dimensional layouts on the web, allowing you to control both rows and columns of a webpage. It provides a way to create complex and responsive grid-based designs with relatively little code.
Basic Concepts of CSS Grid
1. Grid Container: This is the parent element where the grid layout is applied. The items inside this container become grid items.
2. Grid Items: These are the child elements of the grid container. They are automatically placed into rows and columns based on the grid settings.
3. Grid Lines: These are the lines that separate the grid items, both horizontally (rows) and vertically (columns).
4. Grid Tracks: These are the rows or columns themselves.
5. Grid Cells: The smallest unit in the grid, where a row and a column intersect.
Setting Up a Grid Layout
To use CSS Grid, you start by defining a container as a grid and then specify the structure of the grid within that container.
.grid-container { display: grid; /* Turns on grid layout */ grid-template-columns: 1fr; /* 1 column */ grid-template-rows: auto 1fr auto; /* 3 rows: auto-sized header, flexible content, auto-sized footer */ height: 90vh; }
1. display: grid : This property turns the element into a grid container, enabling grid layout for its children.
2. grid-template-columns: 1fr : This property defines the structure of the grid columns. 1fr means one flexible unit, which takes up as much space as available within the container. In this case, there will be a single column that fills the entire width of the container.
3. grid-template-rows: auto 1fr auto : This property defines the structure of the grid rows. It specifies three rows:
· auto: The first row will automatically adjust its height based on its content.
· 1fr: The second row will be flexible and take up as much space as remains after the first and third rows are sized.
· auto: The third row will also automatically adjust its height based on its content.
4. height: 90vh; This property sets the height of the grid container to 90% of the viewport height, ensuring it takes up the full height of the browser window.
In summary, this CSS code creates a grid container with a single column and three rows. The first and third rows will automatically adjust their height based on their content, while the second row will be flexible and take up the remaining space. The container will fill the entire height of the viewport.
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; /* Turns on grid layout */ grid-template-columns: 1fr; /* 1 column */ grid-template-rows: auto 1fr auto; /* 3 rows: auto-sized header, flexible content, auto-sized footer */ height: 90vh; margin: 10px; } .header { background-color: #4CAF50; padding: 20px; text-align: center; color: white; } .main { background-color: #f2f2f2; padding: 20px; text-align: center; } .footer { background-color: #4CAF50; padding: 10px; text-align: center; color: white; } </style> </head> <body> <div class="grid-container"> <div class="header">Header</div> <div class="main">Main Content</div> <div class="footer">Footer</div> </div> </body> </html>
No comments:
Post a Comment