Flexbox + CSS GRID

Question

People would like to know if there is any possibility of using Cssgrid with Flexbox.

display:grid;
display:flex;

I mean using both in the same project, if not, which one would you recommend me to use? You can give an example of how to use both together if possible.

Answer 1

Yes my friend is perfectly feasible to use display:grid and display:flex in the same project. Mainly for the particularities of each one. Roughly speaking the Grid vc can use more to assemble the page layout structure and the flex to build the "component" within these layout blocks of the grid.

The Grid takes advantage when building page layouts, as it offers the possibility to work expanding the spaces vertically and horizontally. Already the flex-box only occupies spaces on the axis X (although with "little ways" you can get around this, but it is not the option indicated, mainly having the grid available)

To better understand see these two images. In Flex the components follow only one axis, or X or Y, and in Grid the two are available at the same time!

---

Now I’ll give you some practical examples. I’ll build the same structure with Flex and then with Grid, notice how with Flex more lines of code are needed and the structure is less semantic.

Example with 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>

Already with Grid we have much less code, a more semantic structure and easier to work the responsiveness of each container if you wish.

Example with 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: Although I have assembled the models they could work perfectly together, for example, the <main> can be display:flex no problem at all.

OBS2: I did not make the treatment responsive in these examples, they are only didactic models ok

---

Despite the Grid practically accept all attributes and styles of the Flex there are some particularities. And for me the most irritating of them is the centralization of elements in the grid-template-columns for example. When you throw the elements to the bottom line you cannot center the last element, this happens due to the grid structure.

See image and code example:

.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>

The same example with Flex with the option to center the last item:

.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>

TIPS:

Always consider browser support, and whether or not your target audience uses a browser that supports these display types

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

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

And read the official documentation, this is from Mozilla, but it is very complete and didactic:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout