For the life of me, I cannot get this. All I want to do is have the max-height be equal to the grid-template-area but I am continuously getting overflow issues, things aren’t centered, and the nested grid overflows the designated grid area.
I’m sure I’m missing something obvious, but I’m very new to all of this and this is something I just cannot figure out. I’m sorry that my code is a mess. Any pointers there would be appreciated as well.
CSS
.Course {
display: grid;
height: 100%;
grid-template-columns: 40% 1fr 1fr 30%;
grid-template-rows: 15% repeat(3,1fr);
gap: 1vw 1vh;
grid-template-areas:
". . . Class"
"Console Thumbnail Thumbnail Thumbnail"
"Console Thumbnail Thumbnail Thumbnail"
"Console Thumbnail Thumbnail Thumbnail";
grid-area: Course;
background: brown;
}
.Console {
grid-area: Console;
border: 5px solid #000000;
border-radius: 10px;
align-content: center;
}
.Class {
grid-area: Class;
background: blue;
}
.Thumbnail {
grid-area: Thumbnail;
background: purple;
border: 5px solid #000000;
border-radius: 10px;
}
.class-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
background-color: blueviolet;
padding: 1.5vw 1.5vh;
gap: 3vw 3vh;
border: 5px solid black;
align-items: center;
}
.class-icon img {
cursor: pointer;
display: block;
opacity: 50%;
transition: transform 250ms ease-in-out;
max-width: 100%;
margin: auto;
&:hover {
opacity: 80%;
transition: opacity 250ms ease-in-out;
}
}
.class-container input[type=radio]:checked + label > img {
filter: drop-shadow(0px 0px 10px hsla(0, 0%, 0%, 0.75));
opacity: 100%;
}
#console-column {
height: 100%;
display: grid;
grid-template-columns: repeat(2,1fr);
justify-content: space-around;
align-items: center;
}
.console-image img {
cursor: pointer;
display: block;
opacity: 50%;
transition: transform 250ms ease-in-out;
max-width: 70%;
margin: auto;
&:hover {
opacity: 80%;
transition: opacity 250ms ease-in-out;
}
}
#console-column input[type=radio]:checked + .console-image img{
opacity: 100%;
transform: scale(1.1);
filter: drop-shadow(0px 0px 10px hsla(0, 0%, 0%, 0.75));
transition: transform 250ms ease-in-out, filter 250ms ease-in-out;
}
/* Course Grid */
.course-container {
display: grid;
width: inherit;
height: inherit;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5,1fr);
background-color: cyan;
margin: auto;
padding: 1.5vw 1.5vh;
grid-gap: 3vw 3vh;
justify-content: space-around;
align-items: center;
}
.course-container > div img {
display: block;
max-width: calc(100% - 10px);
opacity: 80%;
border: 5px solid transparent;
&:hover {
opacity: 100%;
transition: opacity 100ms ease-in-out;
}
}
.course-container input[type=radio]:checked + label > img {
border: 5px solid salmon;
background-color: salmon;
opacity: 100%;
mask-image: linear-gradient(135deg, transparent 4%, gold 0),
linear-gradient(-135deg, transparent 4%, gold 0),
linear-gradient(45deg, transparent 4%, gold 0),
linear-gradient(-45deg, transparent 4%, gold 0);
mask-position: 0 0, 100% 0, 0 100%, 100% 100%;
mask-repeat: no-repeat;
mask-size: 51% 51%;
}
HTML
<div class="Course">
<h1>Course</h1>
<div class="Console">
<div id="console-column">
<label>
<input type="radio" name="console" value="SNES" id="snesConsole">
<div class="console-image">
<img src="./images/logos/Super-Mario-Kart.png" alt="Super Mario Kart">
</div>
</label>
<label>
<input type="radio" name="console" value="N64" id="n64Console">
<div class="console-image">
<img src="./images/logos/Mario-Kart-64.png" alt="Mario Kart 64">
</div>
</label>
<label>
<input type="radio" name="console" value="GBA" id="gbaConsole">
<div class="console-image">
<img src="./images/logos/Mario-Kart-Super-Circuit.png" alt="Mario Kart Super Circuit">
</div>
</label>
<label>
<input type="radio" name="console" value="GCN" id="gcnConsole">
<div class="console-image">
<img src="./images/logos/Mario-Kart-Double-Dash.png" alt="Mario Kart Double Dash">
</div>
</label>
<label>
<input type="radio" name="console" value="DS" id="dsConsole">
<div class="console-image">
<img src="./images/logos/Mario-Kart-DS.png" alt="Mario Kart DS">
</div>
</label>
<label>
<input type="radio" name="console" value="Wii" id="wiiConsole">
<div class="console-image">
<img src="./images/logos/Mario-Kart-Wii.png" alt="Mario Kart Wii">
</div>
</label>
<label>
<input type="radio" name="console" value="3DS" id="mk7Console">
<div class="console-image">
<img src="./images/logos/Mario-Kart-7.png" alt="Mario Kart 7">
</div>
</label>
<label>
<input type="radio" name="console" value="Tour" id="tourConsole">
<div class="console-image">
<img src="./images/logos/Mario-Kart-Tour.png" alt="Mario Kart Tour">
</div>
</label>
<label>
<input type="radio" name="console" value="MK8" id="mk8Console">
<div class="console-image">
<img src="./images/logos/Mario-Kart-8.png" alt="Mario Kart 8">
</div>
</label>
<label>
<input type="radio" name="console" value="Booster Courses" id="boosterConsole">
<div class="console-image">
<img src="./images/logos/Mario-Kart-8-Deluxe-Booster-Course-Pass.png" alt="Mario Kart 8 Deluxe Booster Courses">
</div>
</label>
</div>
</div>
<div class="Class">
<div class="class-container">
<div class="class-icon">
<input type="radio" name="class" id="150cc" value="150cc"/>
<label for="150cc">
<img src="images/classes/150cc.png" alt='150cc'>
</label>
</div>
<div class="class-icon">
<input type="radio" name="class" id="150cc-Mirror" value="150cc Mirror"/>
<label for="150cc-Mirror">
<img src="images/classes/150cc-mirror.png" alt='150cc Mirror'>
</label>
</div>
<div class="class-icon">
<input type="radio" name="class" id="200cc" value="200cc"/>
<label for="200cc">
<img src="images/classes/200cc.png" alt='200cc'>
</label>
</div>
</div>
</div>
<div class="Thumbnail">
<div class="course-container">
<div class="course-thumbnail snesCourses">
<input type="radio" name="course-thumbnail" id="Bowser-Castle-3" value="Bowser Castle 3"/>
<label for="Bowser-Castle-3">
<img src="images/courses/Bowser-Castle-3.png" alt='Bowser Castle 3'>
</label>
</div>
<div class="course-thumbnail snesCourses">
<input type="radio" name="course-thumbnail" id="Donut-Plains-3" value="Donut Plains 3"/>
<label for="Donut-Plains-3">
<img src="images/courses/Donut-Plains-3.png" alt='Donut Plains 3'>
</label>
</div>
<div class="course-thumbnail snesCourses">
<input type="radio" name="course-thumbnail" id="Mario-Circuit-3" value="Mario Circuit 3"/>
<label for="Mario-Circuit-3">
<img src="images/courses/Mario-Circuit-3.png" alt='Mario Circuit 3'>
</label>
</div>
<div class="course-thumbnail snesCourses">
<input type="radio" name="course-thumbnail" id="Rainbow-Road-SNES" value="Rainbow Road - SNES"/>
<label for="Rainbow-Road-SNES">
<img src="images/courses/Rainbow-Road-SNES.png" alt='Rainbow Road - SNES'>
</label>
</div>
<div class="course-thumbnail n64Courses">
<input type="radio" name="course-thumbnail" id="Choco-Mountain" value="Choco Mountain"/>
<label for="Choco-Mountain">
<img src="images/courses/Choco-Mountain.png" alt='Choco Mountain'>
</label>
</div>
<div class="course-thumbnail n64Courses">
<input type="radio" name="course-thumbnail" id="Kalamari-Desert" value="Kalimari Desert"/>
<label for="Kalamari-Desert">
<img src="images/courses/Kalamari-Desert.png" alt='Kalimari Desert'>
</label>
</div>
<div class="course-thumbnail n64Courses">
<input type="radio" name="course-thumbnail" id="Rainbow-Road-N64" value="Rainbow Road - N64"/>
<label for="Rainbow-Road-N64">
<img src="images/courses/Rainbow-Road-N64.png" alt='Rainbow Road - N64'>
</label>
</div>
<div class="course-thumbnail n64Courses">
<input type="radio" name="course-thumbnail" id="Royal-Raceway" value="Royal Raceway"/>
<label for="Royal-Raceway">
<img src="images/courses/Royal-Raceway.png" alt='Royal Raceway'>
</label>
</div>
<div class="course-thumbnail n64Courses">
<input type="radio" name="course-thumbnail" id="Toads-Turnpike" value="Toad's Turnpike"/>
<label for="Toads-Turnpike">
<img src="images/courses/Toads-Turnpike.png" alt='Toads Turnpike'>
</label>
</div>
<div class="course-thumbnail n64Courses">
<input type="radio" name="course-thumbnail" id="Yoshi-Valley" value="Yoshi Valley"/>
<label for="Yoshi-Valley">
<img src="images/courses/Yoshi-Valley.png" alt='Yoshi Valley'>
</label>
</div>
<div class="course-thumbnail gbaCourses">
<input type="radio" name="course-thumbnail" id="Boo-Lake" value="Boo Lake"/>
<label for="Boo-Lake">
<img src="images/courses/Boo-Lake.png" alt='Boo Lake'>
</label>
</div>
<div class="course-thumbnail gbaCourses">
<input type="radio" name="course-thumbnail" id="Cheese-Land" value="Cheese Land"/>
<label for="Cheese-Land">
<img src="images/courses/Cheese-Land.png" alt='Cheese Land'>
</label>
</div>
<div class="course-thumbnail gbaCourses">
<input type="radio" name="course-thumbnail" id="Mario-Circuit-GBA" value="Mario Circuit - GBA"/>
<label for="Mario-Circuit-GBA">
<img src="images/courses/Mario-Circuit-GBA.png" alt='Mario Circuit - GBA'>
</label>
</div>
<div class="course-thumbnail gbaCourses">
<input type="radio" name="course-thumbnail" id="Ribbon-Road" value="Ribbon Road"/>
<label for="Ribbon-Road">
<img src="images/courses/Ribbon-Road.png" alt='Ribbon Road'>
</label>
</div>
<div class="course-thumbnail gbaCourses">
<input type="radio" name="course-thumbnail" id="Riverside-Park" value="Riverside Park"/>
<label for="Riverside-Park">
<img src="images/courses/Riverside-Park.png" alt='Riverside Park'>
</label>
</div>
<div class="course-thumbnail gbaCourses">
<input type="radio" name="course-thumbnail" id="Sky-Garden" value="Sky Garden"/>
<label for="Sky-Garden">
<img src="images/courses/Sky-Garden.png" alt='Sky Garden'>
</label>
</div>
<div class="course-thumbnail gbaCourses">
<input type="radio" name="course-thumbnail" id="Snow-Land" value="Snow Land"/>
<label for="Snow-Land">
<img src="images/courses/Snow-Land.png" alt='Snow Land'>
</label>
</div>
<div class="course-thumbnail gbaCourses">
<input type="radio" name="course-thumbnail" id="Sunset-Wilds" value="Sunset Wilds"/>
<label for="Sunset-Wilds">
<img src="images/courses/Sunset-Wilds.png" alt='Sunset Wilds'>
</label>
</div>
</div>
</div>
</div>
Also, here’s a link to a mockup Codepen and the Github