CSS - Grid Snippets

/***********************************

 Aspect grid by stephanschlegel.de

• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • /

/*** 4 col grid uses the following ratios (one quater has ratio 3:4) ***/ /* set height of div so that bg keeps the aspect ratio */ .stretch{ /*needs pos relative or absolute to work*/

 width: 100%;
 height: 100%;

}

.col{ background: grey;} .a-3-4{ /* 3:4 Aspect Ratio */

 width: 100%;
 padding-top: 133.3333%;
 position: relative;

} .a-6-4, .a-3-2{

 width: 100%;
 padding-top: 66.6666%;
 position: relative;

} .a-9-4{

 width: 100%;
 padding-top: 44.4444%;

} .a-12-4, .a-6-2, .a-3-1{

 width: 100%;
 padding-top: 33.3333%;
 position: relative;

}

/* other common ratios */ .a-1-1{

 width: 100%;
 padding-top: 100%; /* Square */
 position: relative;

}

.a-4-3{

 width: 100%;
 padding-top: 75%; /* 4:3 Aspect Ratio */
 position: relative;

}

.aspect-8-5{

 width: 100%;
 padding-top: 62.5%; /* 8:5 Aspect Ratio */
 position: relative;

}

.a-16-9{

 width: 100%;
 padding-top: 56.25%; /* 16:9 Aspect Ratio */
 position: relative;

}