CSS Grid é o sistema de layouts mais poderoso disponível para CSS
index.html<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main>
<nav>
<h3>Your Account</h3>
</nav>
<form class="sign-in-form">
<h3>Sign in form</h3>
<button>Sign in</button>
</form>
<article class="welcome-message">
<h1>Welcome to Foobar</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur.
</p>
</article>
<section class="market-sites">
<h3>Other products</h3>
</section>
<footer>
<ul>
<li>Help Center</li>
<li>About</li>
<li>Privacy Policy</li>
</ul>
</footer>
</main>
</body>
</html>style.css* {
margin: 0;
padding: 1rem;
border-radius: 5px;
}
body {
font-family: sans-serif;
background: whitesmoke;
padding: 0;
}
main {
max-width: 1000px;
margin: 0 auto;
padding: 0;
}
nav {
background-color: black;
color: white;
grid-area: navbar;
}
.sign-in-form {
background-color: white;
color: #333;
grid-area: sign-in-form;
}
.sign-in-form button {
background-color: #85b54a;
width: 100%;
color: white;
font-size: 1rem;
}
.welcome-message {
grid-area: welcome;
}
.market-sites {
background-color: #673ab7;
color: white;
grid-area: market-sites;
}
footer {
border-top: 0.1rem solid #ccc;
margin-top: 1rem;
padding-top: 0;
color: grey;
text-align: center;
grid-area: footer;
}
footer li {
display: inline;
}
@media screen and (min-width: 700px) {
main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr auto auto 1fr;
grid-gap: 10px;
grid-template-areas:
"navbar navbar"
"welcome sign-in-form"
"market-sites sign-in-form"
"footer footer";
}
}