Skip to main content

01F. Adjust Row Heights in an Existing Layout

About 2 minCSScrashcoursecolt-steelecssgrid

01F. Adjust Row Heights in an Existing Layout ๊ด€๋ จ

Mastering CSS Grid | Colt Steele
Learn web development with Colt Steele
Adjust Row Heights in an Existing Layout | Colt Steele
Practice changing the appearance of a layout without changing its markup.
CSSGridTutorial/Exercise-02 display-grid/Starter at master ยท Colt/CSSGridTutorial
...

Problem

In this exercise, your task is to transform the current layout of a web page with a container that has a header, a nav, a main, and a footer.

Currently, all elements are the same size and have some text inside of them:

nts are the same size and have some text inside of them:

layout screenshot
layout screenshot

The desired layout is that the main content is largest, followed by the header & footer, then the navbar being smallest:

header screenshot
header screenshot

Challenge

Your challenge is to update the CSS to enable grid and create four rows in the container with the following dimensions:

  • 150 pixels
  • 50 pixels
  • 400 pixels
  • 150 pixels

You do not need to touch the HTML file. In the CSS file, do not touch any of the code in the "no touching zone".

Exercise

Exercise
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercise 2</title>

    <link rel="stylesheet" href="app.css">
</head>

<body>
    <!-- ๐Ÿ™…๐Ÿšซ๐Ÿšจ No need to touch anything in this HTML file! ๐Ÿ™…๐Ÿšซ๐Ÿšจ -->
    <div class="container">
        <header class="header">THIS IS OUR PAGE HEADER</header>
        <nav class="navbar">THIS IS OUR NAVBAR</nav>
        <main class="main">THIS IS THE MAIN PAGE CONTENT</main>
        <footer class="footer">THIS IS OUR PAGE FOOTER</footer>
    </div>
</body>

</html>

/* ALL YOUR CODE GOES BELOW THIS LINE */
/* ================================== */

.container {
  width: 800px;
  margin: 0 auto;

  /* create 4 rows:  
  - 150px 
  - 50px 
  - 400px
  - 150px  */
  /* โฌ‡๏ธโฌ‡๏ธโฌ‡๏ธ STYLE THE GRID CONTAINER HERE โฌ‡๏ธโฌ‡๏ธโฌ‡๏ธ */

  /* โฌ†๏ธโฌ†๏ธโฌ†๏ธ STYLE THE GRID CONTAINER HERE โฌ†๏ธโฌ†๏ธโฌ†๏ธ */
}

/* ๐Ÿšจ๐Ÿšซ๐Ÿ™…  START OF THE NO TOUCHING ZONE ๐Ÿ™…๐Ÿšซ๐Ÿšจ */

.container > * {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-family: sans-serif;
}
.header {
  background-color: #f06292;
}
.navbar {
  background-color: #ba68c8;
}

.main {
  background-color: #9575cd;
}

.footer {
  background-color: #7986cb;
}

/* ๐Ÿšจ๐Ÿšซ๐Ÿ™…  END OF THE NO TOUCHING ZONE ๐Ÿ™…๐Ÿšซ๐Ÿšจ */

Solution: Specifying Row Heights

CSSGridTutorial/Exercise-02 display-grid/Solution at master ยท Colt/CSSGridTutorial
...

The first step is to turn the container into a grid container, by setting the display property to grid. This is essential, as our second property won't work otherwise:

.container {
  /* other styles above */
  
  display: grid;
}

Next, we will use the grid-template-rows property, which expects a space-separated list of row values. We want the following row dimensions:

  • 150 pixels
  • 50 pixels
  • 400 pixels
  • 150 pixels
.container {
  display: grid;
  grid-template-rows: 150px 50px 400px 150px;
}

And that's it! We now have a grid container with four rows of the exact dimensions specified.

rows screenshot
rows screenshot