Bearbeiten von „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;
}