Float vs Flex vs Grid - ChoDragon9/posts GitHub Wiki

.box {overflow: hidden}
.item {float: left}
.item:nth-of-type(1) {
  width: calc((100% - 20px) * 1 / 6)
}
.item:nth-of-type(2) {
  width: calc((100% - 20px) * 3 / 6);
  margin: 0 10px
}
.item:nth-of-type(3) {
  width: calc((100% - 20px) * 2 / 6)
}

.box {display: flex;}
.item:nth-of-type(1) {flex: 1}
.item:nth-of-type(2) {
  flex: 3;
  margin: 0 10px
}
.item:nth-of-type(3) {flex: 2}

.box {
  display: grid;
  grid-template-columns: 1fr 3fr 2fr;
  grid-gap: 10px
}

div {border: 1px solid #000}
.wrapper {
  position: relative;
  height: 300px;
  overflow: hidden
}
.content {
  position: absolute;
  z-index: 2;
  left: 10%;
  bottom: 30px;
  width: 80%;
  height: 100px;
}
.radio {
  position: absolute;
  z-index: 2;
  right: calc(10% + 20px)
}
.bg {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.radio:nth-of-type(1) {bottom: 95px}
.radio:nth-of-type(2) {bottom: 75px}
.radio:nth-of-type(3) {bottom: 55px}
.radio:nth-of-type(1):checked ~ .bg {
  background: #f00
}
.radio:nth-of-type(2):checked ~ .bg {
  background: #0f0
}
.radio:nth-of-type(3):checked ~ .bg {
  background: #00f
}

div {border: 1px solid #000}
.wrapper {
  position: relative;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 30px
}
.content {
  position: absolute;
  z-index: 2;
  width: 80%;
  height: 100px;
}
.radio {
  position: absolute;
  right: calc(10% + 20px);
  z-index: 2
}
.bg {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.radio:nth-of-type(1) {bottom: 95px}
.radio:nth-of-type(2) {bottom: 75px}
.radio:nth-of-type(3) {bottom: 55px}
.radio:nth-of-type(1):checked ~ .bg {
  background: #f00
}
.radio:nth-of-type(2):checked ~ .bg {
  background: #0f0
}
.radio:nth-of-type(3):checked ~ .bg {
  background: #00f
}

div {border: 1px solid #000}
.wrapper {
  display: grid;
  height: 300px;
  grid-template:
    '. . . .' 170px
    '. . . .' 20px
    '. . radio1 .' 20px
    '. . radio2 .' 20px
    '. . radio3 .' 20px
    '. . . .' 20px
    '. . . .' 30px
    / 10% auto 32px 10%
}
.content {
  z-index: 2;
  grid-area: 2 / 2 / 7 / 4
}
.radio {z-index: 2}
.bg {grid-area: 1 / 1 / 8 / 5; z-index: 1}

.radio:nth-of-type(1) {grid-area: radio1}
.radio:nth-of-type(2) {grid-area: radio2}
.radio:nth-of-type(3) {grid-area: radio3}
.radio:nth-of-type(1):checked ~ .bg {
  background: #f00
}
.radio:nth-of-type(2):checked ~ .bg {
  background: #0f0
}
.radio:nth-of-type(3):checked ~ .bg {
  background: #00f
}