Advanced Grid Template

Grid 1 Title

				
					selector {grid-row: 2;}
selector {grid-column: 1/4;}
/*tablet view*/
@media screen and (max-width: 1024px) {
    selector {grid-row: 2;}
    selector {grid-column: 2;}
}
/*mobile view*/
@media screen and (max-width: 767px) {
   selector {grid-row: 4;}
    selector {grid-column: 1;}
}

Grid Item

Grid 2 Title

				
					selector {grid-row: 1/2;}
selector {grid-column: 1/4;}
/*tablet view*/
@media screen and (max-width: 1024px) {
    selector {grid-row: 1;}
selector {grid-column: 1;}
}
/*mobile view*/
@media screen and (max-width: 767px) {
}

Grid Item

Grid 3 Title

				
					selector {grid-row: 1/3;}
selector {grid-column: 1/2;}
/*tablet view*/
@media screen and (max-width: 1024px) {
    selector {grid-row: 1;}
selector {grid-column: 1;}
}
/*mobile view*/
@media screen and (max-width: 767px) {
}

Grid Item

Grid 4 Title

				
					selector {grid-row: 1/3;}
selector {grid-column: 2;}
/*tablet view*/
@media screen and (max-width: 1024px) {
    selector {grid-row: 3;}
selector {grid-column: 1;}
}
/*mobile view*/
@media screen and (max-width: 767px) {
}

Grid Item

Grid 5 Title

				
					selector {grid-row: 1/3;}
selector {grid-column: 3/5;}
/*tablet view*/
@media screen and (max-width: 1024px) {
    selector {grid-row: 3;}
selector {grid-column: 1/3;}
}
/*mobile view*/
@media screen and (max-width: 767px) {
   selector {grid-row: 5;}
selector {grid-column: 1;}
}

Grid Item

Grid 6

				
					selector {grid-row: 1/3;}
selector {grid-column: 1/3;}
/*tablet view*/
@media screen and (max-width: 1024px) {
    selector {grid-row: 1;}
selector {grid-column: 1/3;}
}
/*mobile view*/
@media screen and (max-width: 767px) {
   selector {grid-row: 1;}
selector {grid-column: 1;}
}

Grid Item

Grid 7

				
					selector {grid-row: 2/3;}
selector {grid-column: 1/3;}
/*tablet view*/
@media screen and (max-width: 1024px) {
    selector {grid-row: 3;}
selector {grid-column: 1;}
}
/*mobile view*/
@media screen and (max-width: 767px) {
}

Grid Item

Grid 8

				
					selector {grid-row: 1/2;}
selector {grid-column: 1/3;}
/*tablet view*/
@media screen and (max-width: 1024px) {
    selector {grid-row: 1;}
selector {grid-column: 1;}
}
/*mobile view*/
@media screen and (max-width: 767px) {
}

Grid Item

Grid 9

				
					selector {grid-row: 1/2;}
selector {grid-column: 1/3;}
/*tablet view*/
@media screen and (max-width: 1024px) {
    selector {grid-row: 1;}
selector {grid-column: 1;}
}
/*mobile view*/
@media screen and (max-width: 767px) {
}

				
					selector {grid-row: 2/3;}
selector {grid-column: 3/5;}
/*tablet view*/
@media screen and (max-width: 1024px) {
    selector {grid-row: 3;}
selector {grid-column: 2;}
}
/*mobile view*/
@media screen and (max-width: 767px) {
   selector {grid-row: 6;}
selector {grid-column: 1;}
}

Grid Item

Grid 10

				
					selector {grid-row: 1/2;}
selector {grid-column: 3/5;}
/*tablet view*/
@media screen and (max-width: 1024px) {
    selector {grid-row: 2;}
selector {grid-column: 1;}
}
/*mobile view*/
@media screen and (max-width: 767px) {
   selector {grid-row: 3;}
selector {grid-column: 1;}
}

				
					selector {grid-row: 2/3;}
selector {grid-column: 1/3;}
/*tablet view*/
@media screen and (max-width: 1024px) {
    selector {grid-row: 2;}
selector {grid-column: 2;}
}
/*mobile view*/
@media screen and (max-width: 767px) {
   selector {grid-row: 4;}
selector {grid-column: 1;}
}

Grid Item

Grid 11

				
					selector {grid-row: 1/4;}
selector {grid-column: 2/4;}
/*tablet view*/
@media screen and (max-width: 1024px) {
    selector {grid-row: 2;}
selector {grid-column: 2;}
}
/*mobile view*/
@media screen and (max-width: 767px) {
selector {grid-column: 1;}
}

Grid Item

Grid 12

				
					selector {grid-row: 1/4;}
/*tablet view*/
@media screen and (max-width: 1024px) {
    selector {grid-row: 1;}
}
/*mobile view*/
@media screen and (max-width: 767px) {
    selector {grid-row: 1;}
}

Grid Item