How to create timetable in CSS using Grid? - html

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>

Related

How can I make my grid layout sections to span 4 columns each?

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%;

Prevent Overlap When Using IE11 CSS Grid

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;
}

Using grid how do I have text, and a button next to an image

I am trying to have the picture be in the top left (also responsive) with "Mitchell Niesar", "CS Student", and the button on the right of the image. There should be a small gap between the image and the text as well as between the text elements themselves. I also need the button on the right, with the bottom aligned with the bottom of the image.
Currently, only the title is aligned, the subtitle is at the bottom, and the button is directly below the image. Below is what it looks like now.
Has to be done with grid.
HTML:
.logo {
width: 100%;
height: auto;
max-width: 100%;
grid-column: col-start / span 1;
grid-column-start: 1;
grid-row-start: 1;
border-radius: 20%;
}
.title {
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 1;
}
.subtitle {
grid-column-start: 2;
grid-row-end: 2;
grid-row-start: 2;
grid-row-end: 2;
color: lightgray
}
.button {
grid-row-start: 3;
grid-row-end: 3;
justify-self: center;
}
.card {
display: grid;
align-content: space-between;
width: min-content;
white-space: nowrap;
}
<html>
<head>
<meta charset="utf-8">
<title>
hmwk08
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<div class="logo">
<img class="logo shadowed" src="dirt.PNG" type="text/css">
</div>
<div class="title">
Mitchell Niesar
</div>
<div class="subtitle">
CS Student
</div>
<button class="button">
Say Hello
</button>
</div>
</body>
</html>
Add the following to .button to specify the column that your button needs to go into.
grid-column-start: 2;
grid-column-end: 2;
Also, add the following to the .logo, and remove that class for the img tag
grid-row-start: 1;
grid-row-end: 4;
For obvious reasons, you might also want to change the width of your .logo :)
.logo {
width: 100%;
height: auto;
max-width: 100%;
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 1;
grid-row-end: 4;
border-radius: 20%;
}
.title {
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 1;
}
.subtitle {
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 2;
color: lightgray
}
.button {
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 3;
justify-self: center;
}
.card {
display: grid;
align-content: space-between;
width: min-content;
white-space: nowrap;
}
<html>
<head>
<meta charset="utf-8">
<title>
hmwk08
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<div class="logo">
<img class="shadowed" src="https://images.unsplash.com/photo-1558584724-0e4d32ca55a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60" alt>
</div>
<div class="title">
Mitchell Niesar
</div>
<div class="subtitle">
CS Student
</div>
<button class="button">
Say Hello
</button>
</div>
</body>
</html>

CSS Grid not functioning properly despite validation services giving me the 100%?

When running both my HTML and CSS through the validation services I was given the green light yet the code itself doesn't come out using the grid. This is the CSS in question:
body {
display: grid;
grid-template-columns: 6fr;
grid-template-rows: 6fr;
background-color: #f4fff4;
height: 500px;
}
.Background {
grid-row-start: 1;
grid-row-end: 6;
grid-column-start: 1;
grid-column-end: 6;
}
#Heads {
grid-row-start: 2;
grid-row-end: 2;
grid-column-start: 2;
grid-column-end: 5;
box-sizing: border-box;
}
.Backdrop {
grid-row-start: 3;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 6;
}
.Arrow {
grid-row-start: 3;
grid-row-end: 3;
grid-column-start: 6;
grid-column-end: 6;
box-sizing: border-box;
}
.Regis {
grid-row-start: 5;
grid-row-end: 5;
grid-column-start: 2;
grid-column-end: 3;
box-sizing: border-box;
}
.Cont {
grid-row-start: 5;
grid-row-end: 5;
grid-column-start: 4;
grid-column-end: 5;
box-sizing: border-box;
}
.Refer {
grid-row-start: 4;
grid-row-end: 4;
grid-column-start: 3;
grid-column-end: 4;
box-sizing: border-box;
}
And this is the HTML:
<!doctype html>
<html>
<head>
<title>Website Domain Name</title>
<meta charset="UTF-8">
<meta name="description" content="All in due time.">
<meta name="keywords" content="Git, Code, Win, Yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Hit1.css" rel="stylesheet">
</head>
<body>
<div class="Background">
<header id="Heads">
<h1>Click Here!</h1>
<select>
<option>Beans</option>
<option>Cans</option>
<option>Frijole</option>
<option>Jaguar</option>
</select>
</header>
<div class="Backdrop">
<div class="Arrow">
<p><img src="Arrows.jpg" alt="Arrow"></p>
</div>
<div class="Regis">
<p>Registration</p>
</div>
<div class="Cont">
<p>Contact Us</p>
</div>
<div class="Refer">
<p>References</p>
</div>
</div>
</div>
</body>
</html>
Any and all ideas or thoughts are appreciated. I'm writing at this point so that the post isn't entirely code. Tyvm! =]
.Background {
display: grid;
grid-row-start: 1;
grid-row-end: 6;
grid-column-start: 1;
grid-column-end: 6;
}
.Background div{
display: grid;
}

How do I add a border to a div inside a grid-container without messing up the structure?

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;
}