Added grid for results

This commit is contained in:
Franklin 2023-05-11 15:29:47 -04:00
parent 39270a6fd2
commit c3cb0b8add
2 changed files with 49 additions and 1 deletions

View File

@ -1,5 +1,33 @@
.results-container-padding {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #E3F0FF;
}
.results-container { .results-container {
display: grid; display: grid;
gap: 20px; gap: 20px;
width: 90%;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(6, calc((90vw / 2) - 20px));
}
.result-square {
background-color: red;
}
.result-portrait {
background-color: blue;
grid-row: span 2;
}
.result-landscape {
background-color: green;
grid-column: span 2;
}
.result-instagram {
background-color: yellow;
grid-column: span 2;
grid-row: span 2;
} }

View File

@ -4,8 +4,28 @@ use yew::prelude::*;
pub fn results_section() -> Html { pub fn results_section() -> Html {
html! { html! {
<div class={"results-container-padding"}>
<div class={"results-container"}> <div class={"results-container"}>
<div class={"result-square"}>
</div> </div>
<div class={"result-portrait"}>
</div>
<div class={"result-square"}>
</div>
<div class={"result-landscape"}>
</div>
<div class={"result-instagram"}>
</div>
<div class={"result-square"}>
</div>
<div class={"result-square"}></div>
</div>
</div>
} }
} }