Creating a responsive website with CSS Grid 🎨🖥️
CSS Grid is a two-dimensional layout technique that allows developers to create complex layouts with ease. In this tutorial, we will create a responsive website using CSS Grid.
Preparing the Environment
To get started, create a new HTML file and a CSS file. In the HTML file, add a reference to the CSS file in the header:
<!DOCTYPE html><html> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <!-- Our website content goes here --> </body></html>Creating the Layout
Let's create a simple layout with a header, main content, and a footer. In our HTML file, we will add three divs for each of these sections:
<div id="header">Header</div><div id="main">Main Content</div><div id="footer">Footer</div>Now, in our CSS file, let's create a grid to organize these sections:
body { display: grid; grid-template-rows: auto 1fr auto; height: 100vh; margin: 0; font-family: Arial, sans-serif;}#header { grid-row: 1; background-color: #f8f9fa; padding: 20px; text-align: center;}#main { grid-row: 2; background-color: #fff; padding: 20px;}#footer { grid-row: 3; background-color: #f8f9fa; padding: 20px; text-align: center;}Making the Layout Responsive
The real power of CSS Grid comes from its ability to create responsive layouts. Let's add a media query to our CSS to change the layout when the browser window width is less than 600px:
@media (max-width: 600px) { body { grid-template-rows: auto 1fr auto; } #header, #main, #footer { padding: 10px; }}Conclusion
And that's it! You have just created a responsive website using CSS Grid. We hope this tutorial helped you better understand how CSS Grid works and how you can use it to create responsive layouts.
To continue learning more about web development and responsive design, check out the article on The Power of CSS Flexbox: Making Layoutization Simpler and More Effective.