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
<!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 the Account Center</h1>

        <p>
          Your Account gives you access to any of the Market sites,
          where you can buy or sell digital goods like WordPress themes,
          background music, After Effects project files, photography and much, much more.
        </p>

        <p>
          If you already have an account on one of the Market sites,
          sign in with those details.
        </p>
      </article>

      <section class='market-sites'>
        <h3>Market sites</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';
  }
}

Assista outras lives através do meu canal do Youtube! ou deixe o seu email no formulário desta página para ser lembrado sobre as próximas lives! :)

Deixe um comentário