I'm making a date picker component that includes a calendar which I'm styling using CSS grid. It works great in all browsers except IE11 which shows all the elements in the same position in the top left corner. Am I missing an IE11 specific css property that will prevent this or is it not feasible for this to work in IE11?
How it looks in Chrome:
How it looks in IE11
Here's the code snippet:
.date-picker .dates .days {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[7];
grid-template-columns: repeat(7, 1fr);
justify-items: center;
}
.date-picker .dates .days-of-week {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[7];
grid-template-columns: repeat(7, 1fr);
justify-items: center;
}
.date-picker .dates .days .day {
margin-top: .5em;
margin-bottom: .5em;
height: 36px;
width: 36px;
}
.date-picker .dates .days-of-week .day {
height: 36px;
width: 36px;
}
<div
id="date-picker"
class="date-picker relative cursor-pointer input select text-1_25 active"
min="2021-04-28"
max="2021-05-28"
>
<div
class="
dates
hidden
absolute
left-0
right-0
px-24
py-16
bg-white
rounded-16
shadow-xl
active
"
>
<div
class="
days-of-week
border-b-solid border-gray-a9acc4 border-b
text-gray-65657b
py-8
"
>
<div class="day">S</div>
<div class="day">M</div>
<div class="day">T</div>
<div class="day">W</div>
<div class="day">T</div>
<div class="day">F</div>
<div class="day">S</div>
</div>
<div class="days">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
<div class="day">10</div>
<div class="day">11</div>
<div class="day">12</div>
<div class="day">13</div>
<div class="day">14</div>
<div class="day selected">15</div>
<div class="day">16</div>
<div class="day">17</div>
<div class="day">18</div>
<div class="day">19</div>
<div class="day">20</div>
<div class="day">21</div>
<div class="day">22</div>
<div class="day">23</div>
<div class="day">24</div>
<div class="day">25</div>
<div class="day">26</div>
<div class="day">27</div>
<div class="day">28</div>
<div class="day inactive">29</div>
<div class="day inactive">30</div>
<div class="day inactive">31</div>
</div>
</div>
</div>
After doing some more research it seems that I have to specify each cell's position in the grid in order for it to display correctly in IE11
So the css would look like this:
.date-picker .dates .days {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[7];
grid-template-columns: repeat(7, 1fr);
justify-items: center;
}
.date-picker .dates .days-of-week {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[7];
grid-template-columns: repeat(7, 1fr);
justify-items: center;
}
.date-picker .dates .days .day {
margin-top: .5em;
margin-bottom: .5em;
height: 36px;
width: 36px;
}
.date-picker .dates .days-of-week .day {
height: 36px;
width: 36px;
}
/* Because of IE11 we have to specify every cells place in the grid */
/* Days of the week cell placement */
.days-of-week div:nth-child(1){
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 1;
grid-row: 1;
}
.days-of-week div:nth-child(2){
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 1;
grid-row: 1;
}
.days-of-week div:nth-child(3){
-ms-grid-column: 3;
grid-column: 3;
-ms-grid-row: 1;
grid-row: 1;
}
.days-of-week div:nth-child(4){
-ms-grid-column: 4;
grid-column: 4;
-ms-grid-row: 1;
grid-row: 1;
}
.days-of-week div:nth-child(5){
-ms-grid-column: 5;
grid-column: 5;
-ms-grid-row: 1;
grid-row: 1;
}
.days-of-week div:nth-child(6){
-ms-grid-column: 6;
grid-column: 6;
-ms-grid-row: 1;
grid-row: 1;
}
.days-of-week div:nth-child(7){
-ms-grid-column: 7;
grid-column: 7;
-ms-grid-row: 1;
grid-row: 1;
}
/* Day cell placement */
/* Row one */
.days div:nth-child(1){
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 1;
grid-row: 1;
}
.days div:nth-child(2){
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 1;
grid-row: 1;
}
.days div:nth-child(3){
-ms-grid-column: 3;
grid-column: 3;
-ms-grid-row: 1;
grid-row: 1;
}
.days div:nth-child(4){
-ms-grid-column: 4;
grid-column: 4;
-ms-grid-row: 1;
grid-row: 1;
}
.days div:nth-child(5){
-ms-grid-column: 5;
grid-column: 5;
-ms-grid-row: 1;
grid-row: 1;
}
.days div:nth-child(6){
-ms-grid-column: 6;
grid-column: 6;
-ms-grid-row: 1;
grid-row: 1;
}
.days div:nth-child(7){
-ms-grid-column: 7;
grid-column: 7;
-ms-grid-row: 1;
grid-row: 1;
}
/* Row two */
.days div:nth-child(8){
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 2;
grid-row: 2;
}
.days div:nth-child(9){
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 2;
grid-row: 2;
}
.days div:nth-child(10){
-ms-grid-column: 3;
grid-column: 3;
-ms-grid-row: 2;
grid-row: 2;
}
.days div:nth-child(11){
-ms-grid-column: 4;
grid-column: 4;
-ms-grid-row: 2;
grid-row: 2;
}
.days div:nth-child(12){
-ms-grid-column: 5;
grid-column: 5;
-ms-grid-row: 2;
grid-row: 2;
}
.days div:nth-child(13){
-ms-grid-column: 6;
grid-column: 6;
-ms-grid-row: 2;
grid-row: 2;
}
.days div:nth-child(14){
-ms-grid-column: 7;
grid-column: 7;
-ms-grid-row: 2;
grid-row: 2;
}
/* Row three */
.days div:nth-child(15){
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 3;
grid-row: 3;
}
.days div:nth-child(16){
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 3;
grid-row: 3;
}
.days div:nth-child(17){
-ms-grid-column: 3;
grid-column: 3;
-ms-grid-row: 3;
grid-row: 3;
}
.days div:nth-child(18){
-ms-grid-column: 4;
grid-column: 4;
-ms-grid-row: 3;
grid-row: 3;
}
.days div:nth-child(19){
-ms-grid-column: 5;
grid-column: 5;
-ms-grid-row: 3;
grid-row: 3;
}
.days div:nth-child(20){
-ms-grid-column: 6;
grid-column: 6;
-ms-grid-row: 3;
grid-row: 3;
}
.days div:nth-child(21){
-ms-grid-column: 7;
grid-column: 7;
-ms-grid-row: 3;
grid-row: 3;
}
/* Row four */
.days div:nth-child(22){
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 4;
grid-row: 4;
}
.days div:nth-child(23){
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 4;
grid-row: 4;
}
.days div:nth-child(24){
-ms-grid-column: 3;
grid-column: 3;
-ms-grid-row: 4;
grid-row: 4;
}
.days div:nth-child(25){
-ms-grid-column: 4;
grid-column: 4;
-ms-grid-row: 4;
grid-row: 4;
}
.days div:nth-child(26){
-ms-grid-column: 5;
grid-column: 5;
-ms-grid-row: 4;
grid-row: 4;
}
.days div:nth-child(27){
-ms-grid-column: 6;
grid-column: 6;
-ms-grid-row: 4;
grid-row: 4;
}
.days div:nth-child(28){
-ms-grid-column: 7;
grid-column: 7;
-ms-grid-row: 4;
grid-row: 4;
}
/* Row five */
.days div:nth-child(29){
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 5;
grid-row: 5;
}
.days div:nth-child(30){
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 5;
grid-row: 5;
}
.days div:nth-child(31){
-ms-grid-column: 3;
grid-column: 3;
-ms-grid-row: 5;
grid-row: 5;
}
.days div:nth-child(32){
-ms-grid-column: 4;
grid-column: 4;
-ms-grid-row: 5;
grid-row: 5;
}
.days div:nth-child(33){
-ms-grid-column: 5;
grid-column: 5;
-ms-grid-row: 5;
grid-row: 5;
}
.days div:nth-child(34){
-ms-grid-column: 6;
grid-column: 6;
-ms-grid-row: 5;
grid-row: 5;
}
.days div:nth-child(35){
-ms-grid-column: 7;
grid-column: 7;
-ms-grid-row: 5;
grid-row: 5;
}
/* Row six */
.days div:nth-child(36){
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 6;
grid-row: 6;
}
.days div:nth-child(37){
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 6;
grid-row: 6;
}
.days div:nth-child(38){
-ms-grid-column: 3;
grid-column: 3;
-ms-grid-row: 6;
grid-row: 6;
}
.days div:nth-child(39){
-ms-grid-column: 4;
grid-column: 4;
-ms-grid-row: 6;
grid-row: 6;
}
.days div:nth-child(40){
-ms-grid-column: 5;
grid-column: 5;
-ms-grid-row: 6;
grid-row: 6;
}
.days div:nth-child(41){
-ms-grid-column: 6;
grid-column: 6;
-ms-grid-row: 6;
grid-row: 6;
}
.days div:nth-child(42){
-ms-grid-column: 7;
grid-column: 7;
-ms-grid-row: 6;
grid-row: 6;
}
Related
I am trying to recreate this picture using CSS grid.
However I do not know how to properly create elements that span across multiple colums.
This is the code I have right now.
<div class="Grid">
<div class="Grid-Column">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
<div class="column">5</div>
<div class="column">6</div>
</div>
<div class="Grid-Rows">
<div class="row">Monday</div>
<div class="row">Tuesday</div>
<div class="row">Wednesday</div>
<div class="row">Thursday</div>
<div class="row">Friday</div>
</div>
<div class="Grid-Element">
<div>A</div>
<div>B</div>
<div>C</div>
<div>E</div>
<div>F</div>
</div>
</div>
I'm not sure if this is the best method. Anyway, try it:
.Grid {
width: 700px;
height: 500px;
border: 2px solid red;
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(6, 1fr);
}
.pondeli {
grid-row-start: 2;
grid-row-end: 3;
}
.Utery {
grid-row-start: 3;
grid-row-end: 4;
}
.Streda {
grid-row-start: 4;
grid-row-end: 5;
}
.Ctvrtek {
grid-row-start: 5;
grid-row-end: 6;
}
.Patek {
grid-row-start: 6;
grid-row-end: 7;
}
.a {
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: 3;
grid-column-end: 5;
}
.b {
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: 7;
grid-column-end: 8;
}
.c {
grid-row-start: 4;
grid-row-end: 5;
grid-column-start: 4;
grid-column-end: 5;
}
.d {
grid-row-start: 4;
grid-row-end: 5;
grid-column-start: 5;
grid-column-end: 6;
}
.e {
grid-row-start: 5;
grid-row-end: 6;
grid-column-start: 2;
grid-column-end: 3;
}
.f {
grid-row-start: 5;
grid-row-end: 6;
grid-column-start: 5;
grid-column-end: 7;
}
<div class="Grid">
<div></div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div class="pondeli">Pondeli</div>
<div class="Utery">Utery</div>
<div class="Streda">Streda</div>
<div class="Ctvrtek">Ctvrtek</div>
<div class="Patek"></div>
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>
<div class="f">F</div>
</div>
I am attempting a grid layout, but can't seem to get the left, middle and right to span 4 columns each, along the same row in a 12 column grid.
-------------------------------------------------------------------------
- Header -
-------------------------------------------------------------------------
-------------------------------------------------------------------------
- Nav -
-------------------------------------------------------------------------
-------------------------------------------------------------------------
- Banner
- Banner -
-------------------------------------------------------------------------
----------------------- ----------------------- ------------------------
- - - - - -
- left - - middle - - right -
- - - - - -
- - - - - -
------------------------ ----------------------- ------------------------
-------------------------------------------------------------------------
- footer - footer -
- - -
-------------------------------------------------------------------------
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 10px;
position: relative;
}
header {
grid-column-start: 1;
grid-column-end: 13;
grid-row-start: 1;
grid-row-end: 2;
background: #3bbced;
padding: 30px;
}
nav {
grid-column-start: 1;
grid-column-end: 13;
grid-row-start: 2;
grid-row-end: 3;
background: #3bbced;
padding: 30px;
}
main {
grid-column-start: 1;
grid-column-end: 13;
background: grey;
}
.span-12 {
grid-column-start: span 13;
grid-row-start: 3;
grid-row-end: 4;
background: red;
padding: 30px;
}
.left {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: 5;
background: green;
padding: 30px;
}
.middle {
grid-column-start: 5;
grid-column-end: 9;
grid-row-start: 4;
grid-row-end: 5;
background: yellow;
padding: 30px;
}
.right {
grid-column-start: 10;
grid-column-end: 13;
grid-row-start: 4;
grid-row-end: 5;
background: orange;
padding: 30px;
}
footer {
grid-column: span 12;
grid-row: 9 / 10;
}
<div class="container">
<header class="logo">Header</header>
<nav>
<ul>
Home
Menu
Book
About
</ul>
</nav>
<main>
<article class="span-12">Ipsum</article>
<section class="left">Ipsum</section>
<section class="middle">Ipsum</section>
<section class="right">Ipsum</section>
</main>
<footer>
<div class="footer-col-left">small logo</div>
<div class="footer-col-right">copywrite</div>
</footer>
</div>
If you have display:grid set on an element this this will only affect it's immediate children. In your case the grid will take effect on the element main since this is the direct child of container.
If you want the grid to affect the left,middle,right as well as the footer columns you would either have to pull them out of their respective parents or you can set main and footer to have the same grid as it's parent.
display: grid;
grid-template-columns: inherit;
I don't know if you will be using the grid on container in any other way than presented in this question. But you might consider not using a grid on container and just putting it on the elements that needs columns.
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 10px;
position: relative;
}
header {
grid-column-start: 1;
grid-column-end: 13;
grid-row-start: 1;
grid-row-end: 2;
background: #3bbced;
padding: 30px;
}
nav {
grid-column-start: 1;
grid-column-end: 13;
grid-row-start: 2;
grid-row-end: 3;
background: #3bbced;
padding: 30px;
}
main {
grid-column-start: 1;
grid-column-end: 13;
background: grey;
display: grid;
grid-template-columns: inherit;
}
footer{
display: grid;
grid-template-columns: inherit;
}
.span-12 {
grid-column-start: span 13;
grid-row-start: 3;
grid-row-end: 4;
background: red;
padding: 30px;
}
.left {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: 5;
background: green;
padding: 30px;
}
.middle {
grid-column-start: 5;
grid-column-end: 9;
grid-row-start: 4;
grid-row-end: 5;
background: yellow;
padding: 30px;
}
.right {
grid-column-start: 10;
grid-column-end: 13;
grid-row-start: 4;
grid-row-end: 5;
background: orange;
padding: 30px;
}
footer {
grid-column: span 12;
grid-row: 9 / 10;
}
<div class="container">
<header class="logo">Header</header>
<nav>
<ul>
Home
Menu
Book
About
</ul>
</nav>
<main>
<article class="span-12">Ipsum</article>
<section class="left">Ipsum</section>
<section class="middle">Ipsum</section>
<section class="right">Ipsum</section>
</main>
<footer>
<div class="footer-col-left">small logo</div>
<div class="footer-col-right">copywrite</div>
</footer>
</div>
Wrap left-middle-right on a div or section and try this css
display : grid;
grid-template-areas: "a a a";
width: 100%;
I have 8 elements in a grid. On a desktop screen they appear properly.
I want element-3 to hide at max-width: 885px and element-2 to expand to width: 100%. I have tried the below code but my element-2 is not expanding to width: 100%.
My CSS is:
.container{
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: repeat(4,1fr);
grid-gap: 1rem;
}
.box {
order: 2px solid black;
background-color: aqua;
padding: 10px;
}
.box:first-child{
grid-column-start: 1;
grid-column-end: 5;
}
.box:nth-child(2){
grid-column-start: 1;
grid-column-end: 4;
}
.box:nth-child(3){
grid-column-start: 4;
grid-column-end: 5;
}
.box:nth-child(4){
grid-column-start: 1;
grid-column-end: 5;
}
.box:nth-child(5){
grid-column-start: 1;
grid-column-end: 3;
}
.box:nth-child(6){
grid-column-start: 3;
grid-column-end: 5;
}
.box:nth-child(7){
grid-column-start: 1;
grid-column-end: 5;
}
.box:last-child{
grid-column-start: 1;
grid-column-end: 5;
}
#media only screen
and (max-width: 885px) {
.box:nth-child(3){
display: none;
}
#item2{
width: 100%;
}
}
And my HTML body tag is :
<div class="container">
<div class="box">Item-1</div>
<div class="box">Item-2</div>
<div class="box">Item-3</div>
<div class="box">Item-4</div>
<div class="box">Item-5</div>
<div class="box">Item-6</div>
<div class="box">Item-7</div>
<div class="box">Item-8</div>
</div>
I have just started learning the grid and media queries.
this is working as expected:
#media only screen
and (max-width: 885px) {
.box:nth-child(3){
display: none;
}
.box:nth-child(2){
grid-column-start: 1;
grid-column-end: 5;
}
}
I am using a css grid. Columns and rows of this grid are set to "auto". Each cell in the grid contains (among other things) an image that determines the dimensions.
The grid looks like this:
The problem is: when I reduce the screen size, the ratio of the grid cells is not maintained. It seems like the leftmost column is shrunk first:
This leads to ugly wholes in the grid. How can I ensure that the grid is growing and shrinking consistently while ideally keeping the images determining the appearance?
Here is a simple version of the grid CSS with an accompanying fiddle.
.grid {
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto auto;
display: grid;
position: relative;
grid-gap: 12px 12px;
}
.element_1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3;
}
.element_2 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 4;
}
.element_3 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 5;
}
.element_4 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: 5;
}
.img-responsive {
width: 100%;
height: auto;
}
Here is solution, your css file
.grid {
display: grid;
}
.grid > div img {
display:inline-block;
vertical-align:middle;
}
.element_1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3;
}
.element_1 img {
padding-top:0;
padding-left:0;
}
.element_2 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 4;
}
.element_2 img {
padding-top:0;
padding-right:0;
}
.element_3 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 5;
}
.element_3 img {
padding-bottom:0;
padding-left:0;
}
.element_4 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: 5;
}
.element_4 img {
padding-bottom:0;
padding-right:0;
}
.img-responsive {
box-sizing:border-box;
padding:6px;
width: 100%;
height: auto;
}
#media screen and (max-width:480px) {
.img-responsive {
padding:3px;
}
}
you can see running example & play with source code here jsbin
I am using grids to create an interface. Inside the container, I want to have a wrapper (div) with a border around it. But when I place the grid-items inside the wrapper the structure is destroyed. How do I do to maintain intended structure inside the wrapper?
Without the wrapper, with the desired structure (the button at the bottom is not positioned correctly yet):
This is how it looks with the wrapper, unfortunately:
Here you can see the jsFiddle!
HTML
<div class="wrapper">
<div class="col3r7">
<label class="id">gggg</label>
</div>
<div class="col4r7">
<label class="monkey">hhhhhhhh hhh hh</label>
</div>
<div class="col3r9">
<label class="ape">iiiiiiL</label>
</div>
<div class="col3r11">
<label class="bob">jjjjjj/kkkk</label>
</div>
<div class="col3r13">
<label class="pepsi">lllll</label>
</div>
<div class="col3r15">
<label class="cocacola">lllll</label>
</div>
<div class="col3r17">
<label class="benice">nnnnns</label>
</div>
<div class="col3r19">
<label class="tome">ooo pppp qqqqq]</label>
</div>
<div class="col3r21">
<label class="many">rrrr rr rrrr</label>
</div>
<div class="col3r23">
<label class="labels">ssss</label>
</div>
<div class="col4r25">
<button class="done">ttttt</button>
</div>
</div>
</div>
CSS
.wrapper {
grid-column-start: 3;
grid-column-end: 7;
grid-row-start: 6;
grid-row-end: 25;
border: 2px solid red;
}
.grid-container {
display: inline-grid;
height: 833vh;
width: 100vw;
grid-template-columns: 15.62vw 2.01vw 21.87vw 12.08vw 19.37vw 8.95vw 4.58% auto;
grid-template-rows: 7.32vh 3.51vh 2.53vh 1.56vh 0.39vh 1.37vh 2.34vh 1.66vh 1.56vh 0.88vh 1.56vh 1.76vh 1.56vh 0.88vh 1.85vh 1.76vh 1.56vh 0.88vh 1.56vh 1.76vh 1.56vh 0.88vh 1.85vh 2.54vh 2.24vh 1.66vh;
grid-template-areas: "sidebar head head head head head thinbar sidebar" "sidebar head head head head head thinbar sidebar" "sidebar main main main main main thinbar sidebar";
}
.col1r1 {
grid-column-start: 1;
grid-row-start: 1;
grid-row-end: 3;
}
.col2r1 {
grid-column-start: 2;
grid-column-end: 8;
grid-row-start: 1;
}
.col6r2 {
grid-column-start: 6;
grid-row-start: 2;
grid-row-end: 2;
}
.col3r4 {
grid-column-start: 3;
grid-row-start: 4;
}
.col4r4 {
grid-column-start: 4;
grid-row-start: 4;
}
.col3r7 {
grid-column-start: 3;
grid-row-start: 7;
}
.col4r7 {
grid-column-start: 4;
grid-row-start: 7;
}
.col3r9 {
grid-column-start: 3;
grid-row-start: 9;
}
.col3r11 {
grid-column-start: 3;
grid-row-start: 11;
}
.col3r13 {
grid-column-start: 3;
grid-row-start: 13;
}
.col3r15 {
grid-column-start: 3;
grid-row-start: 15;
}
.col3r17 {
grid-column-start: 3;
grid-row-start: 17;
}
.col3r19 {
grid-column-start: 3;
grid-row-start: 19;
}
.col3r21 {
grid-column-start: 3;
grid-row-start: 21;
}
.col3r23 {
grid-column-start: 3;
grid-row-start: 23;
}
.col4r25 {
grid-column-start: 4;
grid-row-start: 25;
}
.col3r26 {
grid-column-start: 3;
grid-row-start: 26;
}
.done {
height: 2.24vh;
width: 3.33vw;
}