OiO.lk Blog CSS HTML5 and CSS grid – Can't get it to fit the content
CSS

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

  • By admin
  • October 18, 2024
  • 0 Comments
  • 9 minutes read
  • 2 Views
  • 4 days ago


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:opsz@8..60&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/bootstrap@5.0.2/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>



You need to sign in to view this answers

Leave a Comment

Related Post

GPL

Free GPL Cost Calculator for WordPress

October 22, 2024
javascript

javsacript react pagination when 5 columns data in a

October 22, 2024
security

How do I disable OPTIONS Method in IIS?

October 22, 2024
SQL

INFORMATION_SCHEMA > COLUMNS shows outdated information

October 22, 2024
CSS

Toggle Animation CSS

October 22, 2024
jQuery

Django + jQuery: No Image Provided Error with 400

October 22, 2024
Exit mobile version