FlexBox + CSS GRID

I would like to know if there is any possibility of using CSSGrid with FlexBox.

display:grid;
display:flex;

I’m talking about 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 the two together if given.

Yes my friend is perfectly feasible to use display:grid and display:flex in the same project. Mainly because of the particularities of each one. Generally speaking, Grid you can use more to build the page layout structure and flex to build the “components” within those grid layout blocks.

Grid takes advantage of the time to build page layouts, because it offers the possibility to work by expanding the spaces vertically and horizontally. However, flex-box only occupies the spaces in the axis X (although with “jeitinhos” you can work around this, but it is not the indicated option, mainly having grid available) / p>

To better understand 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!

NowI’llgiveyousomepracticalexamples.IwillbuildthesamestructurewithFlexandthenwithGrid,noticehowwithFlexmorelinesofcodeareneededandthestructurebecomeslesssemantic.

ExamplewithFLEX

* {
  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>