3

Galera gostaria de saber se há alguma possibilidade de utilizar o CSSGrid com o FlexBox.

display:grid;
display:flex;

Falo usar os dois no mesmo projeto, caso não, de qual me recomendaria para utilizar? Podem dar um exemplo de como utilizar os dois juntos caso der.

1
  • Eles são complementares e fazem coisas distintas. Idealmente você deve utilizar os dois no mesmo projeto, mas não no mesmo elemento - ou ele aplica o GRID ou o FLEX, ambos nem faz sentido.
    – Woss
    5/09/2018 às 11:56

1 Resposta 1

5

Sim meu amigo é perfeitamente viável usar display:grid e display:flex no mesmo projeto. Principalmente pelas particularidades de cada um. Falando a grosso modo o Grid vc pode usar mais para montar a estrutura de layout da página e o flex para construir os "componente" dentro desses blocos de layout do grid.

O Grid leva vantagem na hora de construir os layouts da página, pois ele oferece a possibilidade de trabalhar expandindo os espaços na vertical e na horizontal. Já o flex-box só ocupa os espaços no eixo X (apesar de que com "jeitinhos" vc pode contornar isso, mas não é a opção indicada, principalmente tendo o grid disponível)

Para entender melhor veja essas duas imagem. No Flex os componentes seguem apenas um eixo, ou X ou Y, e no Grid os dois estão disponíveis aos mesmo tempo!

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui


Agora vou te dar alguns exemplos práticos. Vou montar a mesma estrutura com Flex e depois com Grid, repare como com Flex são necessárias mais linhas de código e a estrutura se torana menos semântica.

Exemplo com FLEX

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
section, header, aside, main, article, footer {
  border: 1px solid;
  min-height: 80px;
}
section {
  display: flex;
  flex-wrap: wrap;
}
header, footer {
  width: 100%;
}
aside {
  width: 30%;
}
main {
  width: 70%;
  display: flex;
  flex-direction: column;
  border: 1px solid red;
}
article {
  width: 100%;
}
<section>
  <header>header</header>
  <aside>aside</aside>
  <main>
    <article>artivle</article>
    <article>article</article>
  </main>
  <footer>footer</footer>
</section>

Já com Grid temos muito menos código, uma estrutura mais semântica e mais fácil de trabalhar a responsividade de cada container caso deseje.

Exemplo com GRID

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
	display: grid;
	grid-template-areas: 
    "header header "
    "aside main"
    "footer footer ";
	grid-template-rows: 1fr 4fr 1fr;
	grid-template-columns: 1fr 2fr;
}
header, aside, main, article, footer {
  border: 1px solid;
  min-height: 30px;
}
header {
  grid-area: header; 
}
aside {
	grid-area: aside; 
}
main {
	grid-area: main; 
  display: grid;
  border: 1px solid red;
}
footer {
  grid-area: footer; 
}
<header>header</header>
<aside>aside</aside>
<main>
  <article>artivle</article>
  <article>article</article>
</main>
<footer>footer</footer>

OBS1: Apesar de eu ter montados dos modelos eles poderia funcionar perfeitamente em conjunto, por exemplo, o <main> pode ser display:flex sem problema algum.

OBS2: Não fiz o tratamento responsivo nesses exemplos, são apenas modelos didáticos ok


Apesar do Grid praticamente aceitar todas os atributos e estilos do Flex existem algumas particularidades. E para mim a mais irritante delas é com relação a centralização de elementos no grid-template-columns pro exemplo. Quando vc vai jogando os elementos pra linha de baixo vc não consegue centralizar o último elemento, isso acontece devido a estrutura do grid.

Veja a imagem e o exemplo de código:

inserir a descrição da imagem aqui

.wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) );
    justify-content: center; /* não vai funcionar o alinhamento center*/
}
.box {
    border:1px solid;
    padding: 20px;
    font-size: 150%;
}
<div class="wrapper">
    <div class="box a">A</div>
    <div class="box b">B</div>
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box e">não centraliza</div>
</div>

O mesmo exemplo com Flex com a opção de centralizar o último item:

inserir a descrição da imagem aqui

.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.box {
    width: 25%;
    box-sizing: border-box;
    border:1px solid;
    padding: 20px;
    font-size: 100%;

}
<div class="wrapper">
    <div class="box a">A</div>
    <div class="box b">B</div>
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box e">agora centraliza</div>
</div>

DICAS:

Leve sempre em consideração o suporte dos browser, e seu público alvo usa ou não um navegador que suporte esses tipos de display

https://caniuse.com/#search=flex

https://caniuse.com/#search=grid

E leia a documentação oficial, essa é da Mozilla, mas é bem completa e didática:

https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox

https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .