CODEWITHSUNDEEP
htmlcssflexboxcss-grid
Plastic
Plastic

Reputation: 10328

Make a grid responsive to its parent width

I have an HTML structure like this:

    <div class="row">
      <div class="half-row">
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
      </div>
      <div class="half-row">
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
      </div>
   </div>

where class 'row' has width: 100% of its parent and the parent width will change over time.

My goal is that the two divs with a "half-row" class must be in-line and occupy 50% of the "row" div. If the size of the "row" div goes below 640px (so the half-row will be < 320px) the two half-row class divs have to stack and each of them occupies 100% of the available space. In both cases, the internal div ("cell" class) must equally divide the available space.

Every suggestion is welcome. Thank you

Upvotes: 1

Views: 4127

Answers (2)

luke-codewalker
luke-codewalker

Reputation: 339

@S.C. is right, flexbox is the way to go and I would also recommend reading the CSS-tricks article! In fact I have used this very same article to construct this alternative example, that's independent of the screen-width:

.row, .half-row {
  display: flex;
}

.row {
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
}

.half-row {
  width: 320px;
  flex-grow: 1;
  justify-content: space-around;

  /* for seeing better what's going on */
  background-color: #aaa;
  border: 1px solid #333;
}
 <div class="row">
      <div class="half-row">
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
      </div>
      <div class="half-row">
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
      </div>
   </div>

Upvotes: 4

S.C.
S.C.

Reputation: 39

You can use flexbox for that. See excellent article from Css-tricks about Flexbox

If you want to tell us more about the cell class who need to divide the available space "equally" (Horizontally ? Vertically ? both ? Squared ? etc.) I'll update my code to fit with your needs.

I Hope this could help you.

.row {
  display: flex;
  width: 100%;
  flex-flow: row wrap;
}

.half-row {
  display: flex;
  flex-flow: row; /* or column */
  flex-basis: 100%;
  
  /* remove after tests */
  background-color: red;
  height: 500px;
}

.cell {
  flex-basis: 100%;

  /* remove after tests */
  background-color: blue; 
}

@media screen and (min-width: 640px) {
  .half-row { flex-basis: 50%; }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="row">
      <div class="half-row">
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
      </div>
      <div class="half-row">
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
      </div>
   </div>
  </body>
</html>

Upvotes: 1

Related Questions