Hoi,
Ik heb een grid met flexbox gemaakt, maar onder het grid heb ik een stuk "lege ruimte" die ik daar niet wil hebben. De hoogte van dat lege stuk is gelijk aan de hoogte van een rij.
Op welke manier kan ik die onnodige, lege ruimte wegkrijgen?
Ik heb een grid met flexbox gemaakt, maar onder het grid heb ik een stuk "lege ruimte" die ik daar niet wil hebben. De hoogte van dat lege stuk is gelijk aan de hoogte van een rij.
Op welke manier kan ik die onnodige, lege ruimte wegkrijgen?
*, *:before, *:after{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing:border-box;
box-sizing: border-box;
}
.tilecontent {
position: relative;
width: 100%;
margin: auto;
overflow: hidden;
}
.tilecontent .content-overlay {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.tilecontent:hover .content-overlay{
opacity: 1;
}
.tile-icon {
position: absolute;
text-align: center;
padding-left: 1em;
padding-right: 1em;
width: 100%;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.tilecontent:hover .tile-icon{
top: 50%;
left: 50%;
opacity: 1;
}
.tile-icon span {
color: #fff;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.fadeIn-top{
top: 20%;
}
.tilebox {
float: left;
width: 100%;
}
.tilebox:before {
content: "";
display: block;
padding-top: 100%;
}
.naam-vakgebied {
color: #fff;
position: absolute;
bottom: 8px;
right: 0;
text-align: center;
width: 100%;}
div.tile-wrap {display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
div.tile-wrap .tile {aspect-ratio: 1 / 1; color: white; font-weight: bold; font-size: 1em; text-align: center;}