Question 411901 in Html Question posted in
Some basic documentation can be found here.

HTML5 and CSS grid – Can't get it to fit the content

It’s been a loong time since I did HTML and CSS, and I’m playing around with grid-layout, but can’t get it to work.

I have made a burger menu, that, when I click it, should toggle the display attribute and show the menu tag. This works, but because the grid is also inside a element, the content of the grid is not filling the whole parent element, just a part of it.

Also, I would like the LinkedIn and WhatsApp icon to be in the lower right corner of the blue rectangle. I have tried with divs and position, but that ruined a lot and had a weird behaviour.

Anyone knows what I’m doing wrong?

function nav_burger(burger) {
  burger.classList.toggle("morph");
  var e = document.getElementById("navigation");
  if (e.style.display === "none") {
    e.style.display = "block";
  } else {
    e.style.display = "none";
  }
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100vh;
  width: 100vw;
}

div#scaffold_screen {
  display: flex;
  height: 100%;
}


/* scl = scaffold container left */

div#scr {
  height: 100%;
  width: 50%;
  /*  width: 66%; */
  padding: 30px 30px 30px 15px;
}


/* scr = scaffold container right */

div#scl {
  height: 100%;
  width: 50%;
  /*  width: 34%; */
  padding: 30px 15px 30px 30px;
}


/* scc = scaffold content container */

div.scc {
  height: 100%;
  width: 100%;
}


/** GRID LAYOUT **/

.grid {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  /**  grid-column-gap: 20px; **/
  /** changed to gap since deprecated **/
  /**  column-gap: 20px; **/
  gap: 20px;
  /** horizontal and vertical gap **/
  padding: 0px;
}


/** it divides the screen in 14, counting up the grids auto shifting lines **/

.gridbox-1 {
  grid-column: span 1;
  border: 0px solid #00ff00;
}

.gridbox-2 {
  grid-column: span 2;
  border: 0px solid #ffff00;
}

.gridbox-3 {
  grid-column: span 3;
}

.gridbox-4 {
  grid-column: span 4;
}

.gridbox-5 {
  grid-column: span 5;
}

.gridbox-6 {
  grid-column: span 6;
}

.gridbox-7 {
  grid-column: span 7;
}

.gridbox-8 {
  grid-column: span 8;
  border: 0px solid #0ffff0;
}

.gridbox-9 {
  grid-column: span 9;
}

.gridbox-10 {
  grid-column: span 10;
  border: 0px solid #00ffff;
}

.gridbox-11 {
  grid-column: span 11;
}

.gridbox-12 {
  grid-column: span 12;
}

.gridbox-13 {
  grid-column: span 13;
}

.gridbox-14 {
  grid-column: span 14;
  border: 0px solid #00ff00;
}


/** LOGO **/


/*  logo container */

div#logo {
  font-family: 'Red Hat Text';
  font-size: 34pt;
  letter-spacing: 1.8pt;
  padding: 15px 0px 0px 30px;
}


/* logo color 1 */

span.logo_c1 {
  color: #ffffff;
}


/* logo color 2 */

span.logo_c2 {
  color: #06d6a0;
  font-weight: bold;
}


/** NAVIGATION **/

div#navigation_icon {
  cursor: pointer;
  padding: 25px 30px 0px 0px;
}


/** navgivation burger icon **/

div.burgerbar1,
div.burgerbar2,
div.burgerbar3 {
  width: 35px;
  height: 5px;
  background-color: #ffffff;
  margin-top: 6px;
  margin-right: 0;
  margin-left: auto;
  transition: 0.4s;
}

.morph .burgerbar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

.morph .burgerbar2 {
  opacity: 0;
}

.morph .burgerbar3 {
  transform: translate(0, -11px) rotate(45deg);
}

nav#navigation {
  color: #ffffff;
  display: none;
  font-size: 40pt;
  margin-top: 100px;
}

nav#navigation p {
  letter-spacing: 1.1pt;
  margin-top: -20px;
  padding: 10px 0px 0px 80px;
}

nav#navigation p.description {
  font-size: 14pt;
  font-style: italic;
  color: #efefef;
  padding: 10px 0px 50px 90px;
}

nav#navigation p a {
  color: #ffffff;
  text-decoration: none;
}

nav#navigation p a:hover {
  color: #06d6a0;
  text-decoration: none;
}


/** HEADER TAGS **/

h1 {
  font-size: 34pt;
  font-family: 'Red Hat Text';
  margin: 0px 0px 30px 0px;
}
<div id="scaffold_screen">
  <div id="scl">
    <div class="scc" style="background-color: #003388;">
      <div class="grid">

        <div class="gridbox-13">
          <div id="logo"><span class="logo_c1">my website</span><span class="logo_c2">.</span></div>
        </div>
        <div class="gridbox-1">
          <div id="navigation_icon" onclick="nav_burger(this)">
            <div class="burgerbar1"></div>
            <div class="burgerbar2"></div>
            <div class="burgerbar3"></div>
          </div>
        </div>


        <nav id="navigation" style="display: none; border: 0px solid #ff0000;">
          <div class="gridbox-14">
            <p><a href="#">my website.</a></p>
            <p class="description">very looong text</p>
          </div>
          <div class="gridbox-14">
            <p><a href="#">some day we like</a></p>
            <p class="description">a very looong text, but even longer</p>
          </div>
          <div class="gridbox-14">
            <p><a href="#">discover</a></p>
            <p class="description">tired of long texts</p>
          </div>
          <div class="gridbox-14">
            <p><a href="#">just</a></p>
            <p class="description">heeelp</p>
          </div>
        </nav>

        <div class="gridbox-14">
          <p style="padding: 0px 30px 30px 0px; text-align: right;"><i class="fa-brands fa-linkedin" style="color: #ffffff; font-size: 15pt;"></i> &nbsp; <i class="fa-brands fa-whatsapp" style="color: #ffffff; font-size: 15pt;"></i></p>
        </div>

      </div>

    </div>
  </div>
  <div id="scr" style="overflow-y: scroll;">
    <div class="scc">
      <div style="width:100%; height:100%; background-image: url('images/front/a.jpg'); background-size: cover; background-repeat: no-repeat;">&nbsp;</div>
    </div>
  </div>
</div>

—– The CSS ——

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100vh;
  width: 100vw;
}

div#scaffold_screen {
  display: flex;
  height: 100%;
}

/* scl = scaffold container left */
div#scr {
  height: 100%;
  width: 50%;
/*  width: 66%; */
  padding: 30px 30px 30px 15px;
}

/* scr = scaffold container right */
div#scl {
  height: 100%;
  width: 50%;
/*  width: 34%; */
  padding: 30px 15px 30px 30px;
}


/* scc = scaffold content container */
div.scc {
  height: 100%;
  width: 100%;
}


/** GRID LAYOUT **/
.grid {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
/**  grid-column-gap: 20px; **/ /** changed to gap since deprecated **/
/**  column-gap: 20px; **/
  gap: 20px; /** horizontal and vertical gap **/
  padding: 0px;
}

/** it divides the screen in 14, counting up the grids auto shifting lines **/
.gridbox-1  { grid-column: span 1; border: 0px solid #00ff00; }
.gridbox-2  { grid-column: span 2; border: 0px solid #ffff00;  }
.gridbox-3  { grid-column: span 3; }
.gridbox-4  { grid-column: span 4; }
.gridbox-5  { grid-column: span 5; }
.gridbox-6  { grid-column: span 6; }
.gridbox-7  { grid-column: span 7; }
.gridbox-8  { grid-column: span 8; border: 0px solid #0ffff0;}
.gridbox-9  { grid-column: span 9; }
.gridbox-10 { grid-column: span 10; border: 0px solid #00ffff;}
.gridbox-11 { grid-column: span 11; }
.gridbox-12 { grid-column: span 12; }
.gridbox-13 { grid-column: span 13; }
.gridbox-14 { grid-column: span 14; border: 0px solid #00ff00; }
  
  
/** LOGO **/
  
/*  logo container */
div#logo {
  font-family: 'Red Hat Text';
  font-size: 34pt;
  letter-spacing: 1.8pt;
  padding: 15px 0px 0px 30px;
}

/* logo color 1 */
span.logo_c1 { color: #ffffff; }

/* logo color 2 */
span.logo_c2 { color: #06d6a0; font-weight: bold; }


/** NAVIGATION **/

div#navigation_icon {
  cursor: pointer;
  padding: 25px 30px 0px 0px;
}

/** navgivation burger icon **/
div.burgerbar1, div.burgerbar2, div.burgerbar3 {
  width: 35px;
  height: 5px;
  background-color:#ffffff;
  margin-top: 6px;
  margin-right: 0;
  margin-left: auto;
  transition: 0.4s; 
}

.morph .burgerbar1 { transform: translate(0, 11px) rotate(-45deg); }
.morph .burgerbar2 { opacity: 0; }
.morph .burgerbar3 { transform: translate(0, -11px) rotate(45deg); }

nav#navigation {
  color: #ffffff;
  display: none;
  font-size: 40pt;
  margin-top: 100px;
}

nav#navigation p { letter-spacing: 1.1pt; margin-top: -20px; padding: 10px 0px 0px 80px; }
nav#navigation p.description { font-size: 14pt; font-style: italic; color: #efefef; padding: 10px 0px 50px 90px; }
nav#navigation p a { color: #ffffff; text-decoration: none; }
nav#navigation p a:hover { color: #06d6a0; text-decoration: none; }



/** HEADER TAGS **/
h1 { font-size: 34pt; font-family: 'Red Hat Text'; margin: 0px 0px 30px 0px; }

—– The HTML —–

<!doctype html>
<html lang="en">
<head>

  <!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- fontawesome.com -->
<script src="https://kit.fontawesome.com/46d80123d5.js" crossorigin="anonymous"></script>


<style type="text/css">
  @import url('https://fonts.googleapis.com/css2?family=Alexandria&family=Anek+Latin&family=Inter&family=M+PLUS+1&family=Montserrat&family=Noto+Sans+Display&family=Noto+Serif+Display&family=Open+Sans&family=Quicksand&family=Red+Hat+Display&family=Red+Hat+Text&family=Source+Serif+4:[email protected]&display=swap');
</style>

<link rel="stylesheet" href="css/screen.css">

<title>my website</title>

</head>
<body>

<div id="scaffold_screen">
  <div id="scl">
    <div class="scc" style="background-color: #003388;">
      <div class="grid">

        <div class="gridbox-13"><div id="logo"><span class="logo_c1">my website</span><span class="logo_c2">.</span></div></div>
        <div class="gridbox-1">
          <div id="navigation_icon" onclick="nav_burger(this)">
            <div class="burgerbar1"></div>
            <div class="burgerbar2"></div>
            <div class="burgerbar3"></div>
          </div>
        </div>


        <nav id="navigation" style="display: none; border: 0px solid #ff0000;">
          <div class="gridbox-14"><p><a href="#">my website.</a></p><p class="description">very looong text</p></div>
          <div class="gridbox-14"><p><a href="#">some day we like</a></p><p class="description">a very looong text, but even longer</p></div>
          <div class="gridbox-14"><p><a href="#">discover</a></p><p class="description">tired of long texts</p></div>
          <div class="gridbox-14"><p><a href="#">just</a></p><p class="description">heeelp</p></div>
        </nav>

        <div class="gridbox-14"><p style="padding: 0px 30px 30px 0px; text-align: right;"><i class="fa-brands fa-linkedin" style="color: #ffffff; font-size: 15pt;"></i> &nbsp; <i class="fa-brands fa-whatsapp" style="color: #ffffff; font-size: 15pt;"></i></p></div>

      </div>

    </div>
  </div>
  <div id="scr" style="overflow-y: scroll;">
    <div class="scc">
      <div style="width:100%; height:100%; background-image: url('images/front/a.jpg'); background-size: cover; background-repeat: no-repeat;">&nbsp;</div>
    </div>
  </div>
</div>
    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
<!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-->

<script>
  function nav_burger(burger) {
    burger.classList.toggle("morph");
    var e = document.getElementById("navigation");
    if (e.style.display === "none") {
      e.style.display = "block";
    } else {
      e.style.display = "none";
    }
  } 
</script>

  </body>
</html>
Tags:

2

Answers


  1. 0

    I’m on mobile and using CodePen but I think I know what’s going on and I’ve got a solution for you,

    Grid Layout

    The issue with your grid not filling the parent container likely comes from how the container is styled and how the grid itself is being handled. The container of the grid, which is .scc, is taking the full width and height, but we need to ensure that the grid inside it also stretches fully.

    You can add the following CSS to ensure that the grid takes up the full height of the parent:

    .grid {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 20px;
  padding: 0;
  height: 100%; /* Ensure grid takes full height */
}

    This should ensure that the grid expands fully within the parent container.

    Icon Position

    The issue with positioning the icons can be handled by using position: absolute on the element that contains the icons, and setting its parent as position: relative to control the positioning within that parent. Here’s how to adjust it:

    First, wrap the icons in a container if they aren’t already. Then, use the following CSS:

    /* Parent container */
div.scc {
  position: relative; /* Establish this container as the reference point */
}

/* Icon container */
div.icon-container {
  position: absolute;
  bottom: 20px; /* Distance from bottom */
  right: 20px;  /* Distance from right */
  text-align: right; /* Align icons within the container */
}

.icon-container i {
  font-size: 15pt;
  color: #ffffff;
}

    Update your HTML accordingly:

    <div class="icon-container">
  <i class="fa-brands fa-linkedin"></i> &nbsp;
  <i class="fa-brands fa-whatsapp"></i>
</div>

    This will position the icons 20px from the bottom-right corner of the .scc container.

    Recap

    • Add height: 100% to the grid to ensure it fills the parent container.

    • Use position: absolute to position the LinkedIn and WhatsApp icons at the bottom-right corner.

    Other Considerations

    • Ensure that your div#scaffold_screen is taking up the full width and height of the viewport if it’s not already.

    • You might want to ensure that overflow is handled correctly, especially for the grid’s container, to prevent clipping or unwanted scrollbars.

    Login or Signup to reply.
  2. 0

    You can also try this

    .grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0;
  height: 100%;
}

.grid-item {
  flex: 0 0 calc((100% / 14) - 20px);
  box-sizing: border-box;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search