yoyo yoyo - 1 month ago 7
CSS Question

Creating a 3x3 grid that's responsive?

I am trying to recreate trump.com's landing page but as a 3x3 grid.

I want the second cell of the grid to be the first cell when the website is forced to be responsive.

How do I change the grid with media queries to be full width rectangles under each other and how do I make the 2nd cell on top with the first under it?

This is what I have so far:
https://codepen.io/pisoj1/pen/ZpdRMq

.grid3x3 {
display: inline-block;
height:100%;
width:100%;
position: relative;
}
#overlay-content {

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 0;
background: #000;
position: absolute;
left: 0;
top: 0;
margin: 0;
}
.block {
float: left;
top: 0;
width: 33.3333%;
height: 33.3333%;
position: relative;
display: inline-block;
width: 33.3333%;
height: 33.3333%;
box-sizing: border-box;
padding: 0;
overflow: hidden;
background-color: #090909;
}


Thank you.

Answer

You could use flex and the order property, but if you need better browser support, here's my alternative:

* {
  box-sizing: border-box
}

html,body,main{
  margin: 0;
}

main {
  position: relative;
}

div {
  padding: 16px
}

div:nth-of-type(1){background:#000;color:#fff}
div:nth-of-type(2){background:orange}
div:nth-of-type(3){background:mediumseagreen}
div:nth-of-type(4){background:purple}
div:nth-of-type(5){background:deepskyblue}
div:nth-of-type(6){background:lime}
div:nth-of-type(7){background:wheat}
div:nth-of-type(8){background:crimson}
div:nth-of-type(9){background:mediumblue}

@media (min-width: 768px) {
  html,body,main { height: 100%; }
  div {
    position: absolute;
  }
  div:nth-of-type(1),
  div:nth-of-type(2),
  div:nth-of-type(3) {
    top: 0;
    bottom: 66.6666%
  }
  div:nth-of-type(4),
  div:nth-of-type(5),
  div:nth-of-type(6) {
    top: 33.3333%;
    bottom: 33.3333%;
  }
  div:nth-of-type(7),
  div:nth-of-type(8),
  div:nth-of-type(9) {
    top: 66.6666%;
    bottom: 0;
  }
  div:nth-of-type(2),
  div:nth-of-type(4),
  div:nth-of-type(7) {
    left: 0;
    right: 66.6666%
  }
  div:nth-of-type(3),
  div:nth-of-type(6),
  div:nth-of-type(9){
    right: 0;
    left: 66.6666%
  }
  div:nth-of-type(1),
  div:nth-of-type(5),
  div:nth-of-type(8) {
    left: 33.3333%;
    right: 33.3333%;
  }
}
<main>
  <div>1 : Title/logo</div>
  <div>2 Expand to 768px to see grid</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</main>

Codepen