MEDIA SETTINGS

HOME

HEADER

MAIN class="column1"

BOX 1

BOX 2

BOX 3

BOX 4

CODE

				
.gridArea{
	 display: grid;
	 grid-template-areas:
	 "box1 box2"
	 "box3 box4"
	 ;
	 background: lightgray;
	 grid-gap: 1em;
	 padding: 5px;
}
.box1{
	 grid-area: box1;
	 background: #9ec88d;
	 height: 20px;
	 text-align: center;
}
.box2{
	 grid-area: box2;
	 background: #7bc8db;
	 height: 20px;
	 text-align: center;
}
.box3{
	 grid-area: box3;
	 background: #b799e2;
	 height: 20px;
	 text-align: center;
}
.box4{
	 grid-area: box4;
	 background: #dd9962;
	 height: 20px;
	 text-align: center;
}

ASIDE class="column2"

Grid Manipulation

Grid Column 1

Grid Column 2

Grid Column 3

Grid Column 4

Grid Column 5

CODE

				
	 .gridAlign{
	 display: grid;
	 grid-template-columns: repeat(4, 1fr);
	 grid-gap: 1em;
	 background: lightblue;
	 text-align: center;
	 
	 }
	 .gaCol{
		  background: lightgray;
		  text-align: center;
	 }
	 #gc3{
		  grid-column: 3/5;
	 }
	 #gc2{
		  grid-column: 2/3;
		  grid-row: 1/3;
	 }

SECTION class="column3"

MEDIA MANIPULATION

min - 300 px | max - 500px

				
    @media (min-width: 300px) and (max-width: 600px) {
    body{
        display: grid;
        grid-column-gap: 1em;
        grid-gap: 1em;
        padding: 5px;
    }
    header{
        grid-column: 1/2;
        grid-row: 1/2;
        text-align: center;
        font-size: 8pt;
    }
    .column1{
        font-size: 8pt;
        grid-row: 2/3;
    }
    .column2{
        font-size: 8pt;
        grid-row: 3/4;
    }
    .column3{
        font-size: 8pt;
        grid-row: 5/6;
    }
}

min - 500 px | max - 1100px

		  
@media (min-width: 601px) and (max-width: 1100px){
	 
	 .gridZone{
		  display: grid;
		  grid-template-columns: repeat(3, 1fr);
		  grid-gap: 1em;
		  padding: 10px;
	 
	 }
	 header{
		  text-align: center;
		  background: #81CCF3;
	 }
	 .column1{
		  grid-column: 1/2;
		  font-size: 9pt;
	 
	 }
	 .column2{
		  grid-column: 2/3;
		  font-size: 9pt;
	 
	 }
	 .column3{
		  grid-column: 1/3;
		  grid-row: 2/3;
		  font-size: 9pt;
	 }
}

min - 1100 px

		  
@media (min-width: 900px) {
    .gridZone{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 1em;
    }
    header{
        background: rebeccapurple;
        padding: 5px 5px 5px 5px;
        text-align: left;
    }
    .column1{
        grid-column: 1/6;
        grid-row: 2/3;
        padding: 5px 5px 5px 5px;
    }
    .column2{
        grid-column: 6/13;
        grid-row: 2/3;
        padding: 5px 5px 5px 5px;

    }
    .column3{
        grid-column: 1/13;
        grid-row: 3/4;
        grid-column-gap: 1em;
        padding: 5px 5px 5px 5px;

    }


}