Jump to content

Why are my grids not equal CSS grid

Recommended Posts


New to the forum and if I make a mistake such as posting in the wrong place, please let me know.  I am learning CSS grid and there are supposed to be six columns and 3 rows, but the last 3 columns seems to be smaller. Please explain why. Your help is much appreciated.


<!DOCTYPE html>

<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>


:root {margin:0;padding:0;
  --primary: #ccc; --dark:#333; --light:#fff;
html {box-sizing: border-box; text-align: center;
  font-size:1.5rem; font-family: Arial black; }
.weather {grid-area:weather;}
.snow {grid-area:snow; }
.sun {grid-area:sun; }
.rain {grid-area:rain; }
.bolt {grid-area:bolt; }
.wrapper {
  display: grid; grid-template-areas:
  'weather weather weather weather weather weather'
  'snow snow snow sun sun sun'
  'rain rain rain bolt bolt bolt';
  grid-gap: 10px;
  background: #def; padding: 10px;
.wrapper > div {background:var(--primary); color:var(--dark);
  padding: 1rem; font-family: Arial, sans-serifs;
   grid-gap: 5px; box-shadow: var(--shadow);
  border:0.8px solid blue;
  justify-content: center;
<div class="wrapper">
  <p>This grid layout contains six columns and three rows:</p>

    <div class="weather"><h1>Weather<h1></div>
    <div class="snow" ><i class="fas fa-snowflake fa-4x"></i><h3>snow<h3></div>
    <div class="sun"><i class="fas fa-sun fa-4x"></i><h3>sun</h3></div>
    <div class="rain"><i class="fas fa-cloud-rain fa-4x"></i><h3>rain</h3></div>
    <div class="bolt"> <i class="fas fa-bolt fa-4x"></i><h3>bolt</h3></div>






Edited by 888
might help a bit

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
    • Most Online

    Newest Member
  • Forum Statistics

    • Total Topics
    • Total Posts