## Creating a Simple Responsive Landing Page with CSS Grid
### Approach
We'll create a basic responsive landing page structure using HTML5 semantic elements and CSS Grid for layout. This will include a header, two columns for content, and a footer.
### Code
#### HTML
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Landing Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Welcome to My Blog</h1>
</header>
<main class="grid-container">
<section class="content-column">
<h2>Featured Posts</h2>
<p>This is a featured post summary.</p>
</section>
<section class="content-column">
<h2>Recent Posts</h2>
<p>This is a recent post summary.</p>
</section>
</main>
<footer>
<p>© 2023 My Blog</p>
</footer>
</body>
</html>
```
#### CSS (in style.css)
```css
/* Global Styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
/* Header Styles */
header {
background-color: #333;
color: #fff;
padding: 1em;
text-align: center;
}
/* Grid Container Styles */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr; /* Two equal-width columns */
gap: 20px; /* Gap between grid items */
padding: 20px;
}
/* Content Column Styles */
.content-column {
background-color: #f7f7f7;
padding: 20px;
border: 1px solid #ddd;
}
/* Footer Styles */
footer {
background-color: #333;
color: #fff;
padding: 1em;
text-align: center;
clear: both; /* Ensure footer stays at the bottom */
}
/* Responsive Design */
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr; /* Single column on smaller screens */
}
}
```
### Explanation
* We define a grid container with `.grid-container` and use `display: grid;` to enable grid layout.
* `grid-template-columns: 1fr 1fr;` creates two equal-width columns. The `1fr` unit represents a fractional unit, which allows the columns to share the available space equally.
* The `gap: 20px;` property adds a gap between grid items for better readability.
* In the media query, we change `grid-template-columns: 1fr 1fr;` to `grid-template-columns: 1fr;` on smaller screens (max-width: 768px), which stacks the content columns into a single column.
### Key Points
* CSS Grid is a powerful layout system that allows you to create complex, responsive layouts with ease.
* Use `grid-template-columns` and `grid-template-rows` to define the structure of your grid.
* The `fr` unit is a flexible unit that allows grid items to share space proportionally.
### Possible Variations
* Experiment with different grid templates, such as `grid-template-columns: 2fr 1fr;` for a larger featured post section and a smaller recent posts section.
* Add more grid items or use `grid-auto-rows` to create a dynamic grid.
### Testing and Debugging Tips
* Use the browser's developer tools to inspect and debug your CSS Grid layout.
* Test your layout on different screen sizes and devices to ensure responsiveness.
By following these steps and understanding how CSS Grid works, you can create a simple and responsive landing page for your blog.
MongoDB - Build AI That Scales
Mini tools
Expert web development AI that creates, debugs, and optimizes code.Open## Creating a Simple Responsive Landing Page with CSS Grid ### Approach We'll create a basic responsive landing page structure using HTML5 semantic elements and CSS Grid for layout. This will include a header, two columns for content, and a footer. ### Code #### HTML ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Blog Landing Page</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Welcome to My Blog</h1> </header> <main class="grid-container"> <section class="content-column"> <h2>Featured Posts</h2> <p>This is a featured post summary.</p> </section> <section class="content-column"> <h2>Recent Posts</h2> <p>This is a recent post summary.</p> </section> </main> <footer> <p>© 2023 My Blog</p> </footer> </body> </html> ``` #### CSS (in style.css) ```css /* Global Styles */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, sans-serif; line-height: 1.6; } /* Header Styles */ header { background-color: #333; color: #fff; padding: 1em; text-align: center; } /* Grid Container Styles */ .grid-container { display: grid; grid-template-columns: 1fr 1fr; /* Two equal-width columns */ gap: 20px; /* Gap between grid items */ padding: 20px; } /* Content Column Styles */ .content-column { background-color: #f7f7f7; padding: 20px; border: 1px solid #ddd; } /* Footer Styles */ footer { background-color: #333; color: #fff; padding: 1em; text-align: center; clear: both; /* Ensure footer stays at the bottom */ } /* Responsive Design */ @media (max-width: 768px) { .grid-container { grid-template-columns: 1fr; /* Single column on smaller screens */ } } ``` ### Explanation * We define a grid container with `.grid-container` and use `display: grid;` to enable grid layout. * `grid-template-columns: 1fr 1fr;` creates two equal-width columns. The `1fr` unit represents a fractional unit, which allows the columns to share the available space equally. * The `gap: 20px;` property adds a gap between grid items for better readability. * In the media query, we change `grid-template-columns: 1fr 1fr;` to `grid-template-columns: 1fr;` on smaller screens (max-width: 768px), which stacks the content columns into a single column. ### Key Points * CSS Grid is a powerful layout system that allows you to create complex, responsive layouts with ease. * Use `grid-template-columns` and `grid-template-rows` to define the structure of your grid. * The `fr` unit is a flexible unit that allows grid items to share space proportionally. ### Possible Variations * Experiment with different grid templates, such as `grid-template-columns: 2fr 1fr;` for a larger featured post section and a smaller recent posts section. * Add more grid items or use `grid-auto-rows` to create a dynamic grid. ### Testing and Debugging Tips * Use the browser's developer tools to inspect and debug your CSS Grid layout. * Test your layout on different screen sizes and devices to ensure responsiveness. By following these steps and understanding how CSS Grid works, you can create a simple and responsive landing page for your blog.
