Aprenda CSS Grid em 60 minutos

CSS Grid é o sistema de layouts mais poderoso disponível para CSS.

Eu apresentei uma introdução ao assunto em uma LIVE no formato de tech-talk:

Arquivos demonstrados no vídeo acima:

`index.html`

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`

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";
  }
}

Assista outras lives aqui!