CSS Layout - Grid System

   
   
 css  
 frontend  
Article Series

This article series contain few sections.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Create Basic Layout with Grid Method.

Table of Content

  • Preface: Table of Content

  • 1: Prepare Document and Stylesheet

  • 2: Equal Column Height

  • 3: Page Layout with Sticky Footer

  • Conclusion

Reading

To understand the concept of grid system, this article might interest you.

Source Code

You can download the source code of this article series here.

1: Prepare Document and Stylesheet

This basic required kowledge has been provided in previus article. Please read CSS Layout - Overview before continue.

2: Equal Column Height

Now our very first Grid System, how do I define two columns with equal height?

Document

<html>
<head>
  <title>Two Columns Grid Example</title>
  <link rel="stylesheet" type="text/css" href="02-grid.css">
</head>
<body>
  <div class="container">

    <aside id="leftside">
      <p>Side</p>
    </aside>

    <main id="mainside">
      <p>Hello world!</p>

      <p>lorem ipsum<br/>lorem ipsum<br/>lorem ipsum<br/>
      lorem ipsum<br/>lorem ipsum<br/>lorem ipsum</p>
    </main>

  </div>
</body>
</html>

Stylesheet

We can define the layout with this grid system arrangement.

body, html {
  height: 100%;
  padding: 0;
  margin: 0;

  background-color: white;
}

.container {
  display: grid;
  grid-template-areas: 'leftside mainside';
  grid-template-columns: 25% 70%;
  grid-gap: 5%;

  min-height: 100%;
}

#leftside {
  grid-area: leftside;

  background-color: #f44336;
  border: 2px dashed #b71c1c;

  padding-left: 1rem;
  padding-right: 1rem;
}

#mainside {
  grid-area: mainside;

  background-color: #d32f2f;
  border: 2px dashed #b71c1c;

  padding-left: 1rem;
  padding-right: 1rem;
}

Browser Preview

Consider have a look at the result in your favorite browser

CSS: Equal Column Height

How does It Works ?

Just this CSS to make it happened. All summed to be a hundred percent width.

.container {
  display: grid;
  grid-template-areas: 'leftside mainside';
  grid-template-columns: 25% 70%;
  grid-gap: 5%;
}

#leftside {
  grid-area: leftside;
}

#mainside {
  grid-area: mainside;
}

I also add this below for comfort.

.container {
  min-height: 100%;
}

3: Page Layout with Sticky Footer

And now page layout. How do I make sticky footer inside element?

Document

<html>
<head>
  <title>Page Layout Grid Example</title>
  <link rel="stylesheet" type="text/css" href="03-grid.css">
</head>
<body>
  <div class="container">

    <aside id="leftside">
      <p>Side</p>
    </aside>

    <header id="top">
      <p>Top</p>
    </header>

    <article id="content">
      <h1>Content</h1>

      <p>Hello world!</p>

      <p>lorem ipsum<br/>lorem ipsum<br/>lorem ipsum<br/>
      lorem ipsum<br/>lorem ipsum<br/>lorem ipsum</p>
    </article>

    <footer  id="bottom">
      <p>Bottom</p>
    </footer>

  </div>
</body>
</html>

Stylesheet

Now it become a little bit complex.

body, html {
  height: 100%;
  padding: 0;
  margin: 0;

  background-color: white;
}

.container {
  display: grid;
  grid-template-areas: 
    'leftside top'
    'leftside content'
    'leftside bottom';
  grid-template-columns: 25% 65%;
  grid-template-rows: 3rem calc(auto-8px) 3rem;
  grid-column-gap: 5%;
  grid-row-gap: 2rem;

  min-height: 100%;
}

#leftside {
  grid-area: leftside;

  background-color: #f44336;
  border: 2px dashed #b71c1c;
  
  padding-left: 1rem;
  padding-right: 1rem;
}


#top, #bottom, #content {
  text-align: center;
  border: 2px dotted #b71c1c;
}

#top {
  grid-area: top;
  background-color: #e57373;
}

#content {
  grid-area: content; 
  background-color: #ffcdd2;
}

#bottom {
  grid-area: bottom;  
  background-color: #e57373;
}

Browser Preview

Consider have a look at the result in your favorite browser

CSS: Page Layout

How does It Works ?

Just this CSS arrangement.

.container {
  display: grid;
  grid-template-areas: 
    'leftside top'
    'leftside content'
    'leftside bottom';
  grid-template-columns: 25% 65%;
  grid-template-rows: 3rem calc(auto-8px) 3rem;
  grid-column-gap: 5%;
  grid-row-gap: 2rem;

  min-height: 100%;
}

#top {
  grid-area: top;
}

#content {
  grid-area: content; 
}

#bottom {
  grid-area: bottom;  
}

Conclusion

Grid system is magnificient, for a rigid layout requirement.

We are going to use other layout, so reader can experience the difference. Consider continue reading [ CSS Layout - Float with Calc ].

Thank you for reading.