CSS Grid ile yaşanan sorun nasıl çözülebilir?

egeruzz2424 · Dün 20:20

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Periyodik Tablo</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div class="wrapper">
 <div class="periodic-table">
 <div class="element nonmetal c1 r1">
 <div class="square">
 <div class="atomic-number">1</div>
 <div class="label">
 <div class="symbol">H</div>
 <div class="name">Hydrogen</div>
 </div>
 <div class="atomic-mass">1.008</div>
 </div>
 </div>
 <div class="element noble-gas c18 r1">
 <div class="square">
 <div class="atomic-number">2</div>
 <div class="label">
 <div class="symbol">He</div>
 <div class="name">Helium</div>
 </div>
 <div class="atomic-mass">4.0026</div>
 </div>
 </div>
 <div class="element c1 r2 alkali-metal">
 <div class="square">
 <div class="atomic-number">1</div>
 <div class="label">
 <div class="symbol">Li</div>
 <div class="name">Lithium</div>
 </div>
 <div class="atomic-mass">1.008</div>
 </div>
 </div>
 <div class="element c1 r3 alkali-metal">
 <div class="square">
 <div class="atomic-number">1</div>
 <div class="label">
 <div class="symbol">Na</div>
 <div class="name">Sodium</div>
 </div>
 <div class="atomic-mass">1.008</div>
 </div>
 </div>
 <div class="element c1 r4 alkali-metal">
 <div class="square">
 <div class="atomic-number">1</div>
 <div class="label">
 <div class="symbol">H</div>
 <div class="name">Potassium</div>
 </div>
 <div class="atomic-mass">1.008</div>
 </div>
 </div>
 <div class="element c1 r5 alkali-metal">
 <div class="square">
 <div class="atomic-number">1</div>
 <div class="label">
 <div class="symbol">H</div>
 <div class="name">Rubidium</div>
 </div>
 <div class="atomic-mass">1.008</div>
 </div>
 </div>
 <div class="element c1 r6 alkali-metal">
 <div class="square">
 <div class="atomic-number">1</div>
 <div class="label">
 <div class="symbol">H</div>
 <div class="name">Caesium</div>
 </div>
 <div class="atomic-mass">1.008</div>
 </div>
 </div>
 <div class="element c1 r7 alkali-metal">
 <div class="square">
 <div class="atomic-number">1</div>
 <div class="label">
 <div class="symbol">H</div>
 <div class="name">Francium</div>
 </div>
 <div class="atomic-mass">1.008</div>
 </div>
 </div>
 </div>
 </div>
</body>
</html>

SCSS:

$bgColor: rgb(31, 31, 31);
$alkaliMetalColor: #ecbe59;
$alkalineEarthMetalColor: #dee955;
$lanthanoidColor: #ec77a3;
$actinoidColor: #c686cc;
$transitionMetalColor: #fd8572;
$postTransitionMetalColor: #4cddf3;
$metalloidColor: #3aefb6;
$nonmetalColor: #52ee61;
$nobleGasColor: #759fff;
$unknownColor: #cccccc;

html {
 width: 100%;
 height: 100%;
}

body {
 background-color: $bgColor;
 translate: no;
 text-shadow: 0 0 0.4vw currentColor;
}

.wrapper {
 padding: 2%;
 overflow: hidden;
 position: relative;
}

.periodic-table {
 color: #fff;
 display: grid;
 grid-template-columns: repeat(18, 1fr);
 // grid-template-rows: repeat(10, 1fr);
 grid-gap: 5px;
}
.element {
 cursor: pointer;
 font-size: 0.5vw;
 transition: 500ms;
 position: relative;
 border: 2px solid;
 box-sizing: border-box;
 background: $bgColor;
 height: 1fr;
 width: 1fr;
 left: 0;
 top: 0;

 .square {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: max-content;
 border: 2px solid;
 box-sizing: border-box;
 background: $bgColor;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 transition-property: transform, z-index, left, right, top, bottom;
 transition-duration: 100ms, 0ms, 200ms, 200ms, 200ms, 200ms;
 transition-delay: 0ms, 100ms, 0ms, 0ms, 0ms, 0ms;
 }
 .atomic-number{
 position: absolute;
 left: 0;
 top: 0;
 padding: 2px;
 }

 .label{
 text-align: center;
 transition: 200ms;
 }

 .symbol{
 font-size: 1.7vw;
 }

 .name{
 font-size: 0.7vw;
 }

 .atomic-mass{
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 padding: 2px;
 text-align: center;
 }

 .atomic-weight{
 position: absolute;
 right: 0;
 top: 0;
 list-style: none;
 margin: 0;
 padding: 2px;
 opacity: 0;
 transition: 200ms;
 text-align: right;
 }
}

.placeholder{
 position: relative;
 z-index: -1;
 font-size: 1vw;
 padding-bottom: 100%;
 color: #fff;
 transition: 500ms;

 .square{
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 border: 2px solid;
 box-sizing: border-box;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 opacity: 0.5;
 }
}

@for $i from 1 through 18 {
 .c#{$i} {
 grid-column: $i;
 }
}
@for $i from 1 through 10 {
 .r#{$i} {
 grid-row: $i;
 }
}

.alkali-metal {
 color: $alkaliMetalColor;
}
.alkaline-earth-metal {
 color: $alkalineEarthMetalColor;
}
.transition-metal {
 color: $transitionMetalColor;
}
.post-transition-metal {
 color: $postTransitionMetalColor;
}
.metalloid {
 color: $metalloidColor;
}
.nonmetal {
 color: $nonmetalColor;
}
.noble-gas {
 color: $nobleGasColor;
}
.lanthanoid {
 color: $lanthanoidColor;
}
.actinoid {
 color: $actinoidColor;
}
.unknown {
 color: $unknownColor;
}

SCSS'i yeni öğrendim ve basit bir proje yapmak istedim ama böyle bir sorunla karşılaştım. Bir sürü şey denedim ama bir türlü düzeltemedim. Yardım eder misiniz?

CSS Grid ile yaşanan sorun nasıl çözülebilir?

egeruzz2424

Decapat