What's new

Closed Css | one page layout using display: grid;

Status
Not open for further replies.

_iamkurt

Honorary Poster
Joined
Aug 13, 2017
Posts
463
Reaction
308
Points
235
Hello PHC,

Good Morning, I hope meron kayong natutunan sa previous tuts ko and today, I will show you how to:
- use display: grid in creating one web responsive page.

Thank sa suggestion ni ka-PHC Shadow Chaser
xQhcWd.png
With that said, let us understand what is the main difference between Flexbox and Grid in CSS display:

Flexbox layout is most appropriate to the components of an application, and small-scale layouts.
while the Grid layout is intended for larger scale layouts.

For example nang Flexbox layout, please see https://phcorner.net/threads/597669/

On the said link above, we use display flex to layout the menus on our page, which is the right example of small-scale layouts. I hope this will answer your question Shadow Chaser why I use flex on the said tutorial.

After this tutorial, you should see a bigger picture on when to use flexbox and grid on your future projects. On the other hand, for starters., you may bookmark this post instead, and check this out later.

If you are ready, here are the output screenshots for our tutorial today.
s26uva.png
RG28uo.png
N8YkrS.png
EnMwd2.png

On this tutorial, I will use pure SCSS to render out our CSS rules. Now, for our markup:
HTML:
<!DOCTYPE html>
<html>
  <head>
    <title>CSS | One page layout</title>
    <meta charset="UTF-8">
  </head>
  <body>

    <header>
      <nav>
        <a href="#">home</a>
        <a href="#">tech</a>
        <a href="#">news</a>
        <a href="#">media</a>
        <a href="#">contact</a>
      </nav>
    </header>

    <section>
      <h1>What is Lorem Ipsum?</h1>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </section>

    <aside>
      <h2>Why do we use it?</h2>
      <p>
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
      </p>
    </aside>

    <footer>
      <h3>Where does it come from?</h3>
      <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. </p>
    </footer>

  </body>
</html>

Output:
JlukFC.png

For starters, I use HTML5 declaration and for the new elements (header, nav, aside and footer). For a complete list, you may check You do not have permission to view the full content of this post. Log in or register now.

I know the layout is ugly as expected. Let us get placeed background-colors instead. Here are the SCSS rules below:
Code:
/* https://coolors.co/e09a9a-89edff-e1edf7-e8e894-dbc33d */
$PARROT_PINK: #E09A9A;
$ELECTRIC_BLUE: #89EDFF;
$AZUREISH_WHITE: #E1EDF7;
$LIGHT_KHAKI: #E8E894;
$MEAT_BROWN: #DBC33D;

body{
  margin: 0rem;

  & * {
    padding: 1rem;
  }
}
a{
  color: $AZUREISH_WHITE;
  text-decoration: none;
  padding: 1rem;
  display: inline-block;
}
header{
  background-color: $PARROT_PINK;
}
section{
  background-color: $LIGHT_KHAKI;
}
aside{
  background-color: $AZUREISH_WHITE;
}
footer{
  background-color: $MEAT_BROWN;
}

Output:
s26uva.png

I try to make these layout as presentable as possible to avoid confusion for starters and just get the basic foundation of how Grid works. If you finish this tutorial, please do not forget to hit like. I really appreciated it.

On the other hand, here is the screenshot on how it looks if you inspect element:
iNDgez.png

Easy to remember diba? header, section, aside and footer are neatly arranged from the top to bottom. By default, these elements are being displayed as block. For starters, these are the effective way to show your content in a mobile device.

For example Apple site:
GTS9Ad.png

For Airbnb site:
HsMW6m.png

I hope you the idea already. Now, let us make it responsive using display: grid;

The idea is if we reach a minimum width of a device. Let us keep, header and footer elements on the same place. However, for the section and aside element, let us keep them in a two column layout.

Simple lang diba? however, before I learn Grids, I use floats and clear: both; rules to get this done and for starters, I know, you know what I mean.

Let us proceed then. Of course, we will use media queries then target the min-width to 600px, here are the rules below:
Code:
@media (min-width: 600px){
}

Then display the body element in Grid:
Code:
@media (min-width: 600px){
body {
    display: grid;
  }
}

Then let us add these rules below:
grid-template-columns: 60% 40%;

These means, we have 2 columns, from left 60% in width and 40% in width. Parang ganito:
3BzPNx.png
Then grid-template-rows: 25% auto 25%;

Which means, from the first row: 25% height, second row: auto, and last row: 25%. Parang ganito:
RzUg48.png
Pag pinagsama:
cXJzom.png

I hope you get the idea already. But, we are not done yet. Let us label our elements first. Here are the additional CSS rules below:

Code:
@media (min-width: 600px){
  body {
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-rows: 25% auto 25%;
  }

  header{
    grid-area: header; <<<<<<<<<< 
  }
  section{
    grid-area: section; <<<<<<<<<<
  }
  aside{
    grid-area: aside; <<<<<<<<<< 
  }
  footer{
    grid-area: footer; <<<<<<<<<<
  }
}

grid-area is how you name an element for you to label them in a grid container, which in our case, the body element. For visual, we should have:
WihGlx.png

To avoid confusion, I label them by their element name. Finally, we will add the grid-template-areas to the body element:

grid-template-areas:
"header header"
"section aside"
"footer footer";

Which means:
- all first row, occupy all two columns for header area only.
- the second row, occupy the first column for section area and the second column for aside area.
- the last row, occupy all two columns for footer area only.

If still have confusion, you may check this out: You do not have permission to view the full content of this post. Log in or register now.

All in all, we shoud have this rules below:
Code:
@media (min-width: 600px){
  body {
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-rows: 25% auto 25%;
    grid-template-areas:
      "header header"
      "section aside"
      "footer footer"
      ;
  }

  header{
    grid-area: header;
  }
  section{
    grid-area: section;
  }
  aside{
    grid-area: aside;
  }
  footer{
    grid-area: footer;
  }
}

Output
RG28uo.png
Once you understand just the basic concept, the remaining rules should be easy for you:
Code:
@media (min-width: 800px){
  body{
     grid-template-areas:
      "header header"
      "footer footer"
      "section aside"
      ;
  }
}

The above rules, I move footer in the second row, then leave the section and aside element in the bottom row. Output:
N8YkrS.png

Code:
@media (min-width: 1000px){
  body{
     grid-template-areas:
      "footer footer"
      "section aside"
      "header header"
      ;
  }
}

The above rules, I move the header element to the last row and move the footer to the first row. Output:
EnMwd2.png


Promising ang output diba?

Today, we learn, a simple markup can jump to any section of the page. You can apply these concepts to your responsive page, where you keep your HTML readable, without any javascript that will manipulate the DOM (DOM defines a standard for accessing documents)

I hope I was able to inspire young Web Dev. More powers sa career nyo. Please leave a like if you are happy with my work.

If you wish to see these in action, please see You do not have permission to view the full content of this post. Log in or register now.
 

Attachments

Status
Not open for further replies.

Similar threads

Back
Top