Сетка HTML5 и CSS. Невозможно подогнать ее под содержимое. ⇐ CSS

[Anonymous]

Прошло много времени с тех пор, как я занимался HTML и CSS, и я экспериментирую с сеткой, но не могу заставить ее работать.
Я сделал меню гамбургера, которое, когда я нажимаю на него, должно переключать атрибут отображения и показывать тег меню. Это работает, но поскольку сетка также находится внутри элемента, ее содержимое не заполняет весь родительский элемент, а только его часть.
Кроме того, мне бы хотелось, чтобы LinkedIn и значок WhatsApp должен находиться в правом нижнем углу синего прямоугольника. Я пробовал использовать элементы div и позицию, но это многое испортило и привело к странному поведению.
Кто-нибудь знает, что я делаю неправильно?


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;
}






my website.










my website.
very looong text

some day we like
a very looong text, but even longer

discover
tired of long texts

just
heeelp



 







 






----- 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; }

----- HTML -----












@import url('https://fonts.googleapis.com/css2?famil ... splay=swap');




my website








my website.








my website.

very looong text
some day we like

a very looong text, but even longer
discover

tired of long texts
just

heeelp


 







 









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";
}
}






Подробнее здесь: https://stackoverflow.com/questions/791 ... he-content