3

My goal is to display 4-8 boxes in a grid of 2-4 rows.

http://jsfiddle.net/vbf0379s/

.twit-container {
  display: flex;
  flex-wrap: wrap;
  padding: 5%;
  margin:-10px 0 0 -10px;
  position: relative;
}
.twit {
  max-width: 200px;
  display: inline-block;
  padding: 20px;
  width: 150px;
  min-height: 100px;
  margin: 10px 0 0 1%;
  background-color: #fff;
  border: 1px solid #ccc;
  flex-grow: 1;
  outline: 2px solid blue;
}

Here's the same thing in grid:

http://jsfiddle.net/03g27end/

The boxes should expand to fill the available space without being very strictly controlled in size. However whenever I try it if the screenspace isn't sufficient for an even number of items the last row's items deforms.

The idea is to achieve what youtube has:

enter image description here

enter image description here

If there is only enough room for 3 columns, I would like the last row to not be shown at all. In the flexbox example the items blow up in an ugly way, and in the grid they just dangle there.

Is this possible with just flexbox/or grids or other methods without media queries or do I have to calculate based on screen size?

Harry
  • 52,711
  • 71
  • 177
  • 261

2 Answers2

4

If you use a combination of grid-template-rows, grid-auto-rows and overflow-hidden you can hide implicitly created rows.

* {
  box-sizing: border-box;
}

.twit-container {
  background: teal;
  padding: calc(5% - 10px);
}

.twit-container-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: auto auto;
  grid-auto-rows: 0px;
  position: relative;
  overflow: hidden;
}

.twit {
  display: inline-block;
  padding: 20px;
  width: 150px;
  min-height: 100px;
  background-color: #fff;
  border: 1px solid #ccc;
  outline: 2px solid blue;
  margin: 10px;
}
<main class="twit-container">
  <div class="twit-container-inner">


    <article class="twit">
      <div class="twit-icon">
        <i class="fa fa-bullhorn"></i>
      </div>
      <div class="twit-content">
        <p class="twit-text">
          Sitting in web dev... This class is so awesome!
        </p>
        <p class="twit-text">
          Para 2!
        </p>
        <p class="twit-text">
          Sitting in web dev... This class is so awesome!
        </p>
        <p class="twit-attribution">
          <a href="#">CSMajor2017</a>
        </p>
      </div>
    </article>

    <article class="twit">
      <div class="twit-icon">
        <i class="fa fa-bullhorn"></i>
      </div>
      <div class="twit-content">
        <p class="twit-text">
          text
        </p>
        <p class="twit-attribution">
          <a href="#">BeaverBeliever</a>
        </p>
      </div>
    </article>

    <article class="twit">
      <div class="twit-icon">
        <i class="fa fa-bullhorn"></i>
      </div>
      <div class="twit-content">
        <p class="twit-text">
          text
        </p>
        <p class="twit-attribution">
          <a href="#">NewtonRulez</a>
        </p>
      </div>
    </article>

    <article class="twit">
      <div class="twit-icon">
        <i class="fa fa-bullhorn"></i>
      </div>
      <div class="twit-content">
        <p class="twit-text">
          Huh?
        </p>
        <p class="twit-attribution">
          <a href="#">ConfusedTweeterer</a>
        </p>
      </div>
    </article>

    <article class="twit">
      <div class="twit-icon">
        <i class="fa fa-bullhorn"></i>
      </div>
      <div class="twit-content">
        <p class="twit-text">
          text
        </p>
        <p class="twit-attribution">
          <a href="#">Setup</a>
        </p>
      </div>
    </article>

    <article class="twit">
      <div class="twit-icon">
        <i class="fa fa-bullhorn"></i>
      </div>
      <div class="twit-content">
        <p class="twit-text">
          text
        </p>
        <p class="twit-attribution">
          <a href="#">Punchline</a>
        </p>
      </div>
    </article>

    <article class="twit">
      <div class="twit-icon">
        <i class="fa fa-bullhorn"></i>
      </div>
      <div class="twit-content">
        <p class="twit-text">
          text
        </p>
        <p class="twit-attribution">
          <a href="#">Hess</a>
        </p>
      </div>
    </article>

    <article class="twit">
      <div class="twit-icon">
        <i class="fa fa-bullhorn"></i>
      </div>
      <div class="twit-content">
        <p class="twit-text">
          text
        </p>
        <p class="twit-attribution">
          <a href="#">TheIRS</a>
        </p>
      </div>
    </article>
  </div>
</main>
sol
  • 22,311
  • 6
  • 42
  • 59
  • Thanks for this. I have problems, though, when I try to use the “gap”. It makes the overlapping rows visible stuffed at the bottom inside the grid container. – Garavani Jul 14 '22 at 09:18
0

you can simply set flex-shrink and flex-grow and flex-basis properties in one line(shortform) using flex property like -

flex: 1 1 200px; /* flex-grow:1; flex-shrink:1; flex-basis:200px;*/`

Example

.twit-container {
  display: flex;
  flex-wrap: wrap;
  padding: 5%;
  margin: -10px 0 0 -10px;
  position: relative;
}

.twit {
  flex: 1 1 240px;
  padding: 15px;
  width: 120px;
  min-height: 100px;
  margin: 10px 0 0 1%;
  background-color: #fff;
  border: 1px solid #ccc;
  outline: 2px solid blue;
}
<main class="twit-container">
  <article class="twit">
    <div class="twit-icon">
      <i class="fa fa-bullhorn"></i>
    </div>
    <div class="twit-content">
      <p class="twit-text">
        Sitting in web dev... This class is so awesome!
      </p>
      <p class="twit-text">
        Para 2!
      </p>
      <p class="twit-text">
        Sitting in web dev... This class is so awesome!
      </p>
      <p class="twit-attribution">
        <a href="#">CSMajor2017</a>
      </p>
    </div>
  </article>

  <article class="twit">
    <div class="twit-icon">
      <i class="fa fa-bullhorn"></i>
    </div>
    <div class="twit-content">
      <p class="twit-text">
        text
      </p>
      <p class="twit-attribution">
        <a href="#">BeaverBeliever</a>
      </p>
    </div>
  </article>

  <article class="twit">
    <div class="twit-icon">
      <i class="fa fa-bullhorn"></i>
    </div>
    <div class="twit-content">
      <p class="twit-text">
        text
      </p>
      <p class="twit-attribution">
        <a href="#">NewtonRulez</a>
      </p>
    </div>
  </article>

  <article class="twit">
    <div class="twit-icon">
      <i class="fa fa-bullhorn"></i>
    </div>
    <div class="twit-content">
      <p class="twit-text">
        Huh?
      </p>
      <p class="twit-attribution">
        <a href="#">ConfusedTweeterer</a>
      </p>
    </div>
  </article>
  <article class="twit">
    <div class="twit-icon">
      <i class="fa fa-bullhorn"></i>
    </div>
    <div class="twit-content">
      <p class="twit-text">
        text
      </p>
      <p class="twit-attribution">
        <a href="#">Setup</a>
      </p>
    </div>
  </article>
  <article class="twit">
    <div class="twit-icon">
      <i class="fa fa-bullhorn"></i>
    </div>
    <div class="twit-content">
      <p class="twit-text">
        text
      </p>
      <p class="twit-attribution">
        <a href="#">Punchline</a>
      </p>
    </div>
  </article>
  <article class="twit">
    <div class="twit-icon">
      <i class="fa fa-bullhorn"></i>
    </div>
    <div class="twit-content">
      <p class="twit-text">
        text
      </p>
      <p class="twit-attribution">
        <a href="#">Hess</a>
      </p>
    </div>
  </article>
  <article class="twit">
    <div class="twit-icon">
      <i class="fa fa-bullhorn"></i>
    </div>
    <div class="twit-content">
      <p class="twit-text">
        text
      </p>
      <p class="twit-attribution">
        <a href="#">TheIRS</a>
      </p>
    </div>
  </article>
</main>
<button type="button" id="create-twit-button"><i class="fa fa-bullhorn"></i></button>
Umutambyi Gad
  • 4,082
  • 3
  • 18
  • 39