Solution 1 :

I don’t think

#main-grid{
  display:grid;
  grid-template-areas:
    "nav nav"
    "head head"
    "bio bio"
    "picture1 article1"
    "article2 article2"
    "picture2 picture2"
    "article3 picture3"
  grid-template-columns: auto auto;
}

is a great idea. What if you have 100 articles and pictures ?

You can do a combination of grid for the layout globally and flexbox/grid to manage articles & pictures.

I would do something like that for example to have everything pretty much responsive :

body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.mySite {
  display: grid;
  grid-template-columns: 1fr .5fr;
  grid-template-areas: 
                  "header header"
                  "main   aside"
                  "footer footer";
}

header {
  grid-area: header;
  height: 40px;
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
}

main {
  grid-area: main;
  display: grid;
  grid-gap: 25px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  background: blue;
  padding: 25px;
}

article {
  background: aliceblue;
  max-width: 200px;
  height: 100px;
  width: 100%;
}

aside {
  grid-area: aside;
  background: green;
  display: flex;
  align-items: center;
  justify-content: center;
}

footer {
  grid-area: footer;
  height: 150px;
  background: yellow;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="mySite">
  <header>
    <p>HEADER</p>
  </header>
  <main>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
  </main>
  <aside>
    <p>SIDEBAR</p>
  </aside>
  <footer>
    <p>FOOTER</p>
  </footer>
</div>

As you can see, the articles will auto adapt thanks to those lines :

display: grid;
grid-gap: 25px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

And to auto adapt your layout you can use media queries. For example here, If I want everything to be in block below 767px I would do something like that :

@media only screen and (max-width: 767px) {
  .mySite {
    grid-template-columns: 1fr;
    grid-template-areas: 
                      "header"
                      "main"
                      "aside"
                      "footer";
  }
}

You can automatically adapt your layout thanks to the CSS grid directly in the parent.

Globally, you will manage the layout with the CSS Grid when you have delimited areas (typically header, sidebar, footer, …)

Flexbox will help you to shape the inner content, like for an article, to do for example : the date on the left and the author on the right of the block with this :

display: flex;
justify-content: space-between;

You can consider flexbox as one dimensional. Flexbox can make rows and columns in the sense that it allows elements to wrap, there’s no way to declaratively control where elements end up since the elements merely push along a single axis and then wrap or not wrap accordingly. They do as they do, if you will, along a one-dimensional plane and it’s because of that single dimension that we can optionally do things, like align elements along a baseline — which is something grid is unable to do.

and CSS grid as two dimensional in that we can (if we want to) declare the sizing of rows and columns and then explicitly place things into both rows and columns as we choose.

Problem :

I am starting in front-end and I am currently studying html / css / vanilla javascript.

For the moment it is going well but I have a concern for understanding the design layout organization in general, and then responsive design becomes another problem for me as I cannot define a default layout correctly.

What are the best practices ?

Using CSS GRID, should I only create basic areas like header, nav, main, footer? or should I also create nested grid inside div/section ?

For exemple:

Should I declare in CSS:

#main-grid{
  display:grid;
  grid-template-areas:
    "nav nav"
    "head head"
    "bio bio"
    "picture1 article1"
    "article2 article2"
    "picture2 picture2"
    "article3 picture3"
  grid-template-columns: auto auto;

or should I simply declare a main content area (span 1) with CSS GRID and add div inside in html (using flexbox, float, playing with witdh,height, etc…?

   #main-grid{
          display:grid;
          grid-template-areas:
            "nav"
            "head"
            "main-content";
          grid-template-columns: auto;
    }

and #main-content in html:

    <div>picture1 + article1 </div>
    <div>article2 + picture2</div>
    <div>article3 + picture3</div>

I know that everyone does their own thing and that it depends on the project but I suppose that there are good practices or logic to be applied by default.

Thank you!

Comments

Comment posted by chriswh

Thank you for this great explanation. In the example you wrote, imagine that I want to add in each of my articles an image + a quote + a few lines. But depending on the article, I want the layout to be different, for example in article 1, I want the image above the quote and the text. In article 2, I want the text to the right of the image, etc … Should I create a nested grid in each article to play with columns / span / flex again? This is only an example, but it will surely allow me to understand how to organize my layouts.

Comment posted by Théo Benoit

You will need to add different class for each articles depending on what you want. Like article–img-left, article–img-right. And you’ll have CSS according to the style, using flexbox or other

Comment posted by chriswh

Ok very well, so in practice I should use CSS GRID for the “main” layout of the site, and then for the content use the class / id with css style? And I suppose that depending on the project, a nested grid can be used if necessary.

Comment posted by Théo Benoit

I can’t really tell you, it depends with your preference and with what you want. Keep using it and with time you will better understand when to use flexbox or grid. Look some articles on google, youtube, practice. You can use a nested grid yeah. I did it for examples to manage the articles positioning in my example. But for the inner I could for example tell with grid I want image on top, text on bottom, and a sidebar with whatever you want. That doesn’t really make sense but you can. And then manage the inner with flexbox or other 😉

Comment posted by chriswh

thank you! I’ll keep practicing 🙂

By

Leave a Reply

Your email address will not be published. Required fields are marked *