CSS Grid - Nested Grid - Responsive - No Media Queries?

Question

Hi there. I'm new to CSS Grid so please be kind.

I've created a simple grid system with a parent grid (css-grid) and three nested grids (nav, hero-left, hero-right). The layout consists of a navigation bar and two adjoining hero header columns. The right hand hero div represents the header image which fills to the top of the page. The left hand div represents a header which will eventually partially overlap the right hand hero div. The nav bar sits at the top and overlaps the right div.

This is correct as it is indended for desktop, however, I am having issues with making it responsive. As an experiment, I'm attempting to do so without using media queries, although please do let me know if using media queries is best for this example.

Upon tablet and mobile, I want the children elements to drop down to form one column and three rows. Presently, resizing the window leads to the elements layering and one even dissapears entirely from view. I have used a variety of techniques but I am confusing matters for myself.

I have attempted to use media queries and " grid-template-columns: repeat(auto-fit, minmax(#, #fr));" to manipulate the template, to no avail.

I feel like I am missing something glaringly obvious here. Does anyone have any ideas please?

You can view my project on Codepen: https://codepen.io/michelleandphil/pen/OJXYzze

Note: You need to shrink the code panel to view project as intended on desktop due to current issues

References: CSS Tricks - no media queries and CSS Tricks - auto-sizing col in CSS Grid

Thanks for your help :)

CSS

body {
  margin: 0; /* removes white boarder around site container */
  font-family: "Montserrat", sans-serif;
}

.site-wrapper {
  padding: 100px;
  background-color: #111114;
  overflow-x: hidden;
}

.intro-header {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.5em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color: #f5c83a;
}

.status {
  font-size: 1.5em;
  color: #e3e2e1;
  font-weight: bold;
  margin-bottom: 2em;
}

/* CSS GRID EXPERIMENT */

.css-grid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  grid-template-areas:
    "nav right"
    "left right";
}

.nav {
  font-size: 30px;
  color: white;
  background-color: #6a7e8d;
  width: 1100px;
  height: 130px;
  grid-area: nav;
  grid-column: 1 / span 2; /* spans nav with hero-right */
  z-index: 1; /* overlaps nav with hero-right; */
}

.hero-left {
  font-size: 30px;
  color: white;
  background-color: #643750;
  height: 650px;
  width: 1000px;
  grid-area: left;
  grid-column: 1 / span 2; /* spans hero-left with hero-right */
}

.h1-nav {
  height: 50%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.h1-left {
  height: 67%;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.h1-right {
  height: 90%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-right {
  font-size: 30px;
  color: white;
  background-color: #534a5c;
  height: 780px;
  width: 750px;
  grid-area: right;
}

HTML

<html>
<body>
  <div class="site-wrapper">
    <div class="intro">
      <div class="intro-header">
        Example of CSS Grid (Nested).<br>
        Responsive resize with media queries.<br>
        Grid overlap with template areas and z-index.
      </div>
      <div class="status">Status: Incomplete.</div>

    <!-- CSS GRID EXPERIMENT -->

    <section class="css-grid">
      <div class="nav">
        <h1 class="h1-nav">Navigation Bar</h1>
      </div>
      <div class="hero-left">
        <h1 class="h1-left">Hero Left</h1>
      </div>
      <div class="hero-right">
        <h1 class="h1-right">Hero Right</h1>
      </div>
  </div>

  </section>
  </section>
</body>

</html>

Welcome to the Treehouse Community

Looking to learn something new?

Michelle Victor

Michelle Victor

CSS Grid - Nested Grid - Responsive - No Media Queries?