HTML CSS GRID - Need layout good practices and advices [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
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!

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