Best Practices and Tips for Layout Design Using HTML and CSS Grid

Question

Best Practices and Tips for Layout Design Using HTML and CSS Grid

As I begin my journey into front-end development, I am currently immersing myself in studying html, css, and vanilla javascript.

While things are going well so far, I find myself struggling with understanding the organization of design layouts in general. Responsive design has also become a challenge for me as I struggle to define a default layout correctly.

What are the best practices when it comes to this?

When using CSS GRID, should I stick to creating basic areas like header, nav, main, footer? Or should I delve deeper and create nested grids within div/section elements?

For example:

Should I define 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 would it be better to simply declare a main content area (span 1) with CSS GRID and insert div elements inside in the HTML (using flexbox, float, adjusting width and 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 understand that approaches can vary based on individual preferences and project requirements, but I believe there must be some best practices or default logic to follow. Any insights would be greatly appreciated!

Thank you!

html css frontend

Answer 1

Answer №1

Personally, I have reservations about

#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;
}

the concept behind this approach. What would happen if there were a large number of articles and pictures involved?

A more effective strategy could involve utilizing a combination of grid for overall layout management, alongside flexbox/grid to handle the individual articles and images.

To achieve a responsive design, one example method could be:

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>

The flexible nature of the grid system can automatically adjust the layout based on these lines:

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

To further customize your layout responsively, utilize media queries. For instance, to stack everything vertically below 767px screen width, you could incorporate rules like this:

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

The CSS grid empowers you to dynamically adapt the layout within the parent container itself.

In summary, employ CSS Grid for managing structured sections like headers, sidebars, footers, etc., while Flexbox aids in organizing content within those divisions. For instance, arranging elements within an article block by placing the date on the left and author on the right using:

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

Essentially, view flexbox as a tool with one-dimensional capabilities, allowing for alignment along a single axis, whereas CSS grid offers a two-dimensional setup where precise placement in both rows and columns is achievable.

Answer 2

Personally, I have reservations about

#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;
}

the concept behind this approach. What would happen if there were a large number of articles and pictures involved?

A more effective strategy could involve utilizing a combination of grid for overall layout management, alongside flexbox/grid to handle the individual articles and images.

To achieve a responsive design, one example method could be:

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>

The flexible nature of the grid system can automatically adjust the layout based on these lines:

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

To further customize your layout responsively, utilize media queries. For instance, to stack everything vertically below 767px screen width, you could incorporate rules like this:

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

The CSS grid empowers you to dynamically adapt the layout within the parent container itself.

In summary, employ CSS Grid for managing structured sections like headers, sidebars, footers, etc., while Flexbox aids in organizing content within those divisions. For instance, arranging elements within an article block by placing the date on the left and author on the right using:

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

Essentially, view flexbox as a tool with one-dimensional capabilities, allowing for alignment along a single axis, whereas CSS grid offers a two-dimensional setup where precise placement in both rows and columns is achievable.

Best Practices and Tips for Layout Design Using HTML and CSS Grid

Answer №1

Similar questions

Determining if a URL links to an image when the file extension is not informative

Establishing space between table rows

Turn off the Antd Datepicker tooltip

Trouble accessing onclick function

Steps to add a label below a text input field

Switch the placement of two DIV elements by their corresponding IDs

Modify the css based on the user's input

Tips on saving this information in a MySQL database

"Achieving Alignment: Placing a Div Element Inside an H

Ways to switch out event listener when button is deactivated

Hiding a div using the Bootstrap `.hidden-xs` class may not work as

Is it possible to use JavaScript to toggle mute and unmute functions on an iPad?

The image appears uniquely sized and positioned on every screen it is viewed on

Unique Pie Chart Designs

Choose and Send pictures through a Form with JavaScript

Conceal specific image(s) on mobile devices

How can you remove the border when an input is in focus on Chrome or Microsoft Edge?

The function Event.preventDefault seems ineffective when attempting to block input of CJK (Korean) characters in a v-text-field of type

Is it possible to run both the frontend and backend on the same port when using vanilla JavaScript for the frontend and Node.js for the backend?

Multiple keyup events being triggered repeatedly