Issue
I have been tasked to recreate this grid layout:
It also says that I have to calculate the column width like this: (100/12)*n, where 100 is the grid container width, 12 is the maximal column amount and n is the column number, for example in the second row there are 2 columns so that n in this case will be 2.
I think I did it wrong.
The way I did it was like this:
HTML
<div class="grid-container">
<div class="row-1 row">
<div class="column-12">12 kollonas</div>
</div>
<div class="row-2 row">
<div class="column-6">6 kollonas</div>
<div class="column-6">6 kollonas</div>
</div>
<div class="row-3 row">
<div class="column-4">4 kollonas</div>
<div class="column-4">4 kollonas</div>
<div class="column-4">4 kollonas</div>
</div>
<div class="row-4 row">
<div class="column-3">3 kollonas</div>
<div class="column-3">3 kollonas</div>
<div class="column-3">3 kollonas</div>
<div class="column-3">3 kollonas</div>
</div>
<div class="row-5 row">
<div class="column-2">2 kollonas</div>
<div class="column-2">2 kollonas</div>
<div class="column-2">2 kollonas</div>
<div class="column-2">2 kollonas</div>
<div class="column-2">2 kollonas</div>
<div class="column-2">2 kollonas</div>
</div>
<div class="row-6 row">
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
</div>
</div>
CSS
[class*='column-']{
width: 100%;
float: left;
min-height: 1px;
padding: 15px 0;
box-sizing: border-box;
}
body{
background-color: rgb(255, 219, 245);
font-family: Arial, Helvetica, sans-serif;
}
.grid-container{
display: grid;
grid-gap: 4px;
text-align: center;
width: 90%;
margin: auto;
row-gap: 20px;
}
.column-12{
grid-column-start: 1;
grid-column-end: 12;
}
.row{
display: grid;
grid-column-start: 1;
grid-column-end: 12;
grid-gap: 20px;
}
.row div{
background-color: white;
height: 50px;
border-radius: 5px;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.205);
color: rgb(158, 58, 167)
}
.row-2{
grid-template-columns: repeat(2, 1fr);
}
.row-3{
grid-template-columns: repeat(3, 1fr);
}
.row-4{
grid-template-columns: repeat(4, 1fr);
}
.row-5{
grid-template-columns: repeat(6, 1fr);
}
.row-6{
grid-template-columns: repeat(12, 1fr);
}
But I feel like I did it wrong. I feel like there is a better way. Maybe someone can help me?
Solution
Not the way I would have done it but it works. You really don't need all those row divs. Just have the grid container have 12 columns and then tell each column class how many columns to span.
[class*='column-'] {
min-height: 1px;
padding: 15px 0;
box-sizing: border-box;
}
body {
background-color: rgb(255, 219, 245);
font-family: Arial, Helvetica, sans-serif;
}
.grid-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 4px;
text-align: center;
width: 90%;
margin: auto;
row-gap: 20px;
}
.grid-container div {
background-color: white;
height: 50px;
border-radius: 5px;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.205);
color: rgb(158, 58, 167)
}
.column-12 {
grid-column: span 12;
}
.column-6 {
grid-column: span 6;
}
.column-4 {
grid-column: span 4;
}
.column-3 {
grid-column: span 3;
}
.column-2 {
grid-column: span 2;
}
.column-1 {
grid-column: span 1;
}
<div class="grid-container">
<div class="column-12">12 kollonas</div>
<div class="column-6">6 kollonas</div>
<div class="column-6">6 kollonas</div>
<div class="column-4">4 kollonas</div>
<div class="column-4">4 kollonas</div>
<div class="column-4">4 kollonas</div>
<div class="column-3">3 kollonas</div>
<div class="column-3">3 kollonas</div>
<div class="column-3">3 kollonas</div>
<div class="column-3">3 kollonas</div>
<div class="column-2">2 kollonas</div>
<div class="column-2">2 kollonas</div>
<div class="column-2">2 kollonas</div>
<div class="column-2">2 kollonas</div>
<div class="column-2">2 kollonas</div>
<div class="column-2">2 kollonas</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
</div>
Answered By - Paulie_D
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.