Grid ou Flexbox
Podemos usar o Display Flex e Display Grid ao mesmo tempo.
HTML
<body> <header> <div>Logo</div> <div>Menu</div> </header> <main>Conteúdo</main> <aside>Infos adicionais</aside> <footer>Rodapé</footer> </body>
CSS
body { margin: 0; height: 100vh; display: grid; grid-template-areas: "header header" "main aside" "footer footer"; grid-template-rows: 30px 1fr 40px; grid-template-columns: 1fr 80px; } header { grid-area: header; background-color: green; display: flex; justify-content: space-between; align-items: center; padding: 0 8px; } main { grid-area: main; background-color: red; } aside { grid-area: aside; background-color: blue; } footer { grid-area: footer; background-color: gray; }
Links úteis
Discord
O grupo é um dos pilares do nosso método e impulsiona tanto o desenvolvimento de habilidades técnicas e comportamentais, quanto a carreira através de conexões profissionais.
Plataforma
Nossa plataforma de aprendizado contínuo reúne todos os nossos programas completos e é a casa dos eventos gratuitos da Rocketseat.