Child element within a nested CSS grid expands or shifts beyond its container

Explore my CodePen project here Greetings, I am currently working on creating a grid layout showcasing 6 links to various projects. Each link is comprised of an image template along with a detailed text description below it. The parent container for each of the 6 templates has been defined with grid-template-rows:0.7fr .3fr;. However, there seems to be an issue with the texted description element as it is not staying within the designated container. Can anyone provide insight into why this might be happening? Any assistance would be greatly appreciated, thank you! (:

<style>
.projects-section{
  background:var(--main-blue);
  display:grid;
  padding:7rem 2rem;
}
.projects-section-header{
  align-self:start;
  max-width:800px;
  color:var(--main-white);
  text-align:center;
  border-bottom:.5rem solid var(--main-white);
  margin: 6rem auto;
}
.tilescontainer{
  justify-self:center;
  width:70%;
  display:grid;
  grid-gap:20px;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,300px) 75px;
}
.project-tile{
  border:1px solid white;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:0.7fr .3fr;
  grid-template-areas:
    "tiletemplate"
    "tiletitle"
}
.title-bg{
  grid-area:tiletitle;
  background-color:var(--main-gray);
  width:100%;
  opacity:0.85;
}
.tile-image{
  width:100%;
  height:70%;
}
.tile-title{
    color:var(--main-white);
  text-transform:capitalize;
  font-weight:100;
  font-size:smaller;
}
#showallcontainer{
  grid-column:2/3;
  grid-row:3/4;
  display:grid;
  width:100%;
  justify-content:center;
  align-content:center;
}
.showall{
  background:var(--main-gray);
  padding:0.5rem 2.5rem;
  opacity:0.85;
}
</style>
<body>
  <section id="projects" class="projects-section">
    <h2 class="projects-section-header">Behold some of my latest projects</h2>
    <div class="tilescontainer">
      <div class="project-tile">
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg" alt="Dr. Norman Borlaug" class="tile-image">
        <div class="title-bg">
          <h4 class="tile-title">Tribute Page</h4>
        </div>
      </div>
      <div class="project-tile">
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png" alt="Quotes" class="tile-image">
        <div class="title-bg">
          <h4 class="tile-title">Random Quote Machine</h4>
        </div>
      </div>
      <div class="project-tile">
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png" alt="JavaScript Calculator" class="tile-image">
        <div class="title-bg">
          <h4 class="tile-title">JavaScript Calculator</h4>
        </div>
      </div>
      <div class="project-tile">
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg" alt="Map Data" class="tile-image">
        <div class="title-bg">
          <h4 class="tile-title">Mapping Data Across the Globe</h4>
        </div>
      </div>
      <div class="project-tile">
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png" alt="WikiViewer" class="tile-image">
        <div class="title-bg">
          <h4 class="tile-title">Wikipedia Viewer</h4>
        </div>
      </div>
      <div class="project-tile">
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png" alt="Tic-Tac-Toe" class="tile-image">
        <div class="title-bg">
          <h4 class="tile-title">Tic Tac Toe Game</h4>
        </div>
      </div>
      <div id="showallcontainer">
        <h4 class="tile-title showall">Show All <i>></i></h4>
      </div>
    </div>
  </section>
</body>
csscss-grid

Answer №1

Your efforts in using the grid layout are commendable, but there appears to be a mistake in the CSS applied to the parent element of the project-tile class.

.tilescontainer {
justify-self: center;
width: 70%;
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(2,300px) 75px;

}

Please correct the grid-template-rows: repeat(2,300px) 75px;

Answer №2

I have made some minor adjustments to your HTML and CSS code.

First, I wrapped all the images within a container so that you can set the grid size against the container and adjust image height and width to 100% to fit the container size.

Next, I simplified the sizing by changing '0.7fr 0.3fr' to '2fr 1fr' for clarity.

I made these modifications using your CodePen without any text breakage.

*{
 padding:0;
 margin:0;
}
html {
      scroll-behavior: smooth;
  transition-duration:0.5s;
  transition-
    }
:root {
    --main-white: #f0f0f0;
    --main-red: #be3144;
    --main-blue: #45567d;
    --main-gray: #303841;
}
h1, h2 {
    font-family: 'Raleway', sans-serif;
    font-size:2.9rem;
}
body{
  line-height:1.4;
  font-size:1.8rem;
  font-family:'Poppins', sans-serif;
}
.navbar{
  width:100%;
  height:75px;
  display:grid;
  justify-content:end;
  align-content:center;
  background:var(--main-red);
  padding:5px;
  /*position:fixed;*/
}
.navul{
  padding:0;
  list-style-type:none;
  display:grid;
  grid-auto-flow:column;
  margin-right:2rem;
}
.navbar ul li{
  margin:0 15px;
}
.navbar ul a{
  /*fonts*/
  font-weight:normal;
  text-decoration:none;
  color:var(--main-white);
}
.welcome-section{
  width: 100%;
  height: 100vh;
  background-color: #000;
  background-image:linear-gradient(62deg,#3a3d40 0%,#181719 100%);
  display:grid;
  align-content:center;
  justify-items:center;
}
#welcome-title{
  text-transform:Capitalize;
  color:var(--main-white);
  font-size:3.7rem;
  font-family: 'Raleway', sans-serif;
}
#welcome-text{
  text-transform:lowercase;
  color:var(--main-red);
  font-style:italic;
  font-size:2rem;
  font-family: 'Poppins', sans-serif;
  font-weight:200;
  opacity:.7;
}
.projects-section{
  background:var(--main-blue);
  display:grid;
  padding:7rem 2rem;
}
.projects-section-header{
  align-self:start;
  max-width:800px;
  color:var(--main-white);
  text-align:center;
  border-bottom:.5rem solid var(--main-white);
  margin: 6rem auto;
}
.tilescontainer{
  justify-self:center;
  width:70%;
  display:grid;
  grid-gap:20px;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,300px) 75px;
}
.project-tile{
  border:1px solid white;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:2fr 1fr;
  grid-template-areas:
    "tiletemplate"
    "tiletitle"
}
.title-bg{
  grid-area:tiletitle;
  background-color:var(--main-gray);
  width:100%;
  opacity:0.85;
}
.tile-image{
  width:100%;
  height:70%;
}
.tile-title{
    color:var(--main-white);
  text-transform:capitalize;
  font-weight:100;
  font-size:smaller;
}
#showallcontainer{
  grid-column:2/3;
  grid-row:3/4;
  display:grid;
  width:100%;
  justify-content:center;
  align-content:center;
}
.showall{
  background:var(--main-gray);
  padding:0.5rem 2.5rem;
  opacity:0.85;
}
 <nav id="navbar" class="navbar">
    <ul class="navul">
      <li><a href="#welcome-section">About</a></li>
      <li><a href="#projects">Work</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <section id="welcome-section" class="welcome-section">
    <h1 id="welcome-title">Hey i am Igor</h1>
    <p id="welcome-text">A web developer</p>
  </section>
  <section id="projects" class="projects-section">
    <h2 class="projects-section-header">These are some of my projects</h2>
    <div class="tilescontainer">
      <div class="project-tile">
        <div class="image-wrapper">
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg" alt="dr norman borlaug" class="tile-image">
        </div>
        <div class="title-bg">
          <h4 class="tile-title">tribute page</h4>
        </div>
      </div>
      
      <div class="project-tile">
        <div class="image-wrapper">
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png" alt="quotes" class="tile-image"></div>
        <div class="title-bg">
          <h4 class="tile-title">random quote machine</h4>
        </div>
      </div>
      <div class="project-tile">
        <div class="image-wrapper">
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png" alt="javascript calculator" class="tile-image"></div>
        <div class="title-bg">
          <h4 class="tile-title">javascript calculator</h4>
        </div>
      </div>
      <div class="project-tile">
        <div class="image-wrapper">
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg" alt="mp data" class="tile-image"></div>
        <div class="title-bg">
          <h4 class="tile-title">map data across the globe</h4>
        </div>
      </div>
      <div class="project-tile">
        <div class="image-wrapper">
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png" alt="wikiviewer" class="tile-image"></div>
        <div class="title-bg">
          <h4 class="tile-title">wikipedia viewer</h4>
        </div>
      </div>
      <div class="project-tile">
        <div class="image-wrapper">
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png" alt="tictactoe" class="tile-image"></div>
        <div class="title-bg">
          <h4 class="tile-title">tic tac toe game</h4>
        </div>
      </div>
      <div id="showallcontainer">
        <h4 class="tile-title showall">show all <i>></i></h4>
      </div>
    </div>
  </section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with Flex property not being supported in Safari browser

.rq-search-container { position: relative; width: 100%; background: white; display: flex; flex-direction: row; align-items: flex-start; border-radius: 2px; z-index: 30; -webkit-flex: 1 0 15em; } While this code functi ...

javascripthtmlcsssafariflexbox

Aligning a tri-column design

I'm encountering an issue with this code that's preventing it from running properly on Google Chrome (I haven't tried other browsers). When the content displays, the regular paragraphs appear aligned to the far left instead of being centered ...

htmlcsspaddingcenteringmargins

In ReactJS, ensure only a single div is active at any given moment

I'm working on a layout with three divs in each row, and there are multiple rows. Only one div can be selected at a time within a row, and selecting a new div will automatically unselect the previously selected one. Here is a simplified version of my ...

javascriptcssreactjsecmascript-6

What could be causing this jQuery to malfunction?

Having trouble with the functionality of hasclass and this.addclass. if ($('.sidebar-menu-container li').hasClass('current-menu-item')) { $(this).addClass('expanded'); } Check out this CodePen for reference. ...

javascriptjqueryhtmlcss

Infinite layers of options in the dropdown navigation bar

I am facing an issue with a dynamically generated unordered list that I want to turn into a dropdown menu. The challenge is that I do not know how many levels there will be, and I only want to display one level at a time. Here is what I have tried so far ...

jqueryhtmlcssdrop-down-menu

When a button is undersized, the click event may not register

In my angular application, I have developed a directive for a tinyMCE editor. Upon setup, I have implemented two handlers: one for the blur event to hide the toolbar and another for the click event to show it. Additionally, I have created another directive ...

csstinymce

What is the best way to access attributes from a div element?

I am currently working on extracting attributes from within a div tag, specifically the custom attributes of the first child element. I am using web scraping techniques with Node.js and Puppeteer. My goal is to retrieve the custom attributes data-ticker, d ...

javascripthtmljquerycssnode.js

When the browser is refreshed, jQuery will automatically scroll the window down

I created a div that matches the height and width of the window to simulate a "home screen." When scrolling down to view the content, everything works fine. However, after refreshing the browser, it automatically scrolls back to where you were before. I wa ...

jqueryhtmlcssscroll

Tips for including background pictures in the jumbotron using bootstrap

I've recently delved into bootstrap just a couple of days ago. Now, I'm encountering an issue where I can't seem to add a background image to my entire webpage or even the jumbotron specifically. I've attempted to directly input the pa ...

csshtmltwitter-bootstrapbackground

Stop flex items from expanding larger than their sibling elements

Is there a way to prevent a flex item from growing bigger than its siblings? Check out the example on CodeSandbox: LINK Here is the sample code: <div class='wrapper'> <div class='box one'></div> <div class ...

htmlcssflexbox

Is it possible to apply the box-shadow effect only to the left and right sides of a div?

Looking to achieve a box shadow effect on just the left and right sides of a div? box-shadow: 0px 0 20px rgba(0,0,0,.4); I experimented with variations like: box-shadow: 0, foo, 0, foo; but it did not yield the desired results. In the illustration bel ...

htmlcss

Clicking on the menu in mobile view will cause it to slide upward

I have implemented sticky.js on my website and it is working well. However, when I resize the browser to mobile view and click the main menu button, it goes up and I am unable to close it. I have to scroll up to see it again. How can I make it stick to the ...

javascriptjquerycssresponsive-design

What is the best approach to create a JavaScript search filter function spanning two pages?

Page1.html has a form with a drop-down menu containing options Color and Shape. There is also a submit button. Assuming Page2.html displays various shapes like Blue Square, Red Square, Blue Circle, Red Circle, is it feasible to create a JavaScript file th ...

javascriptjqueryhtmlcssfilter

How come I am unable to squeeze in 4 columns with cards on a compact screen while utilizing Bootstrap 4?

After several attempts, the 4 columns still refuse to conform to a smaller screen size. The final column ends up being displayed horizontally at the bottom of the cards. @media (max-width: 575px) { .crd-group { flex-wrap: wrap; } .cr ...

htmlcssbootstrap-4

Exploring the process of implementing smooth transitions when toggling between light and dark modes using JavaScript

var container = document.querySelector(".container") var light2 = document.getElementById("light"); var dark2 = document.getElementById("dark"); light2.addEventListener('click', lightMode); function lightMode(){ contai ...

javascripthtmlcssdarkmode

Tips for extracting links from a webpage using CSS selectors and Selenium

Is there a way to extract the HTML links per block on a page that renders in JavaScript? Would using CSS or Selenium be more effective than BeautifulSoup? If so, how would I go about utilizing either of those methods to achieve the extraction of the HTML ...

pythoncssseleniumcss-selectors

"I'm experiencing a problem with display:inline in IIS 7 - can anyone

Unfortunately, our development web server cannot be accessed externally, so sharing a link is not possible. However, I can explain the issue we are experiencing. While creating markup for a new website on my local machine, everything appears as intended. ...

htmlcssiis

Design HTML dropdown menu

I have a sleek menu design with rounded buttons, and I am looking to extend the same style to the dropdown list. I have experimented with various approaches but there are two specific issues that I need assistance with: 1. Achieving rounded corners simil ...

htmlcss

Do you think there might be an issue with the CSS coding?

I have designed a user-friendly responsive login form that allows users to easily log in and reset their passwords. However, I am facing an issue where the username and password fields are not displaying on separate lines as intended. I have thoroughly ins ...

htmlcssforms

Determine the height of a Bootstrap 4 row based on a specific column, rather than the tallest

I am facing an issue with a row that contains two columns. The first column has content that should be visible without overflowing, while the second column includes a long list that needs to be scrollable within the row. The challenge with responsive desi ...

csstwitter-bootstrapbootstrap-4overflow