1

I have some divs (1, 2 and 3 are wrapped in container):

And I need to do change these divs according responsive design like this:

How can I achieve that? Maybe using grids?

Cody Gray - on strike
  • 239,200
  • 50
  • 490
  • 574
Denis
  • 141
  • 1
  • 7
  • 1
    @Cody Gray care to explain why opened this question that doesn't show any effort at all? – dippas Dec 23 '20 at 12:59
  • 5
    @dippas Because "effort" is never required in a Stack Overflow question. Lack of effort is not, and has never been, a close reason. – Cody Gray - on strike Dec 23 '20 at 13:01
  • I've seen dozens if not more of this type of question being closed. – dippas Dec 23 '20 at 13:05
  • 2
    I've seen dozens of blatantly off-topic questions *not* get closed, @dippas. Not everything on Stack Overflow is perfect. If you'd like to flag other questions that you think are incorrectly closed, please go ahead. – Cody Gray - on strike Dec 23 '20 at 13:06

1 Answers1

4

CSS-Grid helps us to achieve this without using any other extra wrappers and without hiding un-hiding stuff using media queries. I am using grid-areas concept of CSS-Grid in this case. Though the same can be achieved using grid-lines concept of CSS-Grid as well.

.main {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(100px, auto);
  max-width: 960px;
  margin: 0 auto;
  gap: 1rem;

  /* Placing grid-items inside our grid */
  grid-template-areas:
    "one one one one four four four"
    "one one one one four four four"
    "two two two two four four four"
    "two two two two four four four"
    "three three three three four four four";
}

.one,
.two,
.three,
.four {
  border: 1px solid #777;
  text-align: center;
  line-height: 5.5;
  font-size: 2rem;
  font-weight: 700;
}
.one {
  grid-area: one;
}

.two {
  grid-area: two;
}

.three {
  grid-area: three;
}

.four {
  grid-area: four;
}

@media (max-width: 768px) {
  .main {
    width: 70%;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "one one one"
      "one one one"
      "two two two"
      "two two two"
      "four four four"
      "four four four"
      "four four four"
      "four four four"
      "three three three";
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Todo | Asynchronous Dynamaic Data</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
   <main class="main">
          <div class="one"> 1</div>
          <div class="two"> 2</div>
          <div class="three">3</div>
          <div class="four">4</div>
    <main>
    <script src="./script.js"></script>
  </body>
</html>

NOTE: The same can be achieved using flexbox as well however, we will need additional code. Some content simply needs to be hidden in small screens and other shown along with the order property of flexbox.

Imran Rafiq Rather
  • 7,677
  • 1
  • 16
  • 35