How do I fit two rows of smaller items to match the larger item?

Question

How do I fit two rows of smaller items to match the larger item?

I am trying to create a flexible grid where two rows of smaller items correspond to a larger item.

What I am trying to achieve:

What do I have:

#thumbs {
  background-color: lightcoral;
  width: 100%;
  margin-top: 90px;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

#thumbs div {
  vertical-align: top;
  display: inline-block;
  *display: inline;
  zoom: 1;
}

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}

<div class=container>
  <div id="thumbs">
    <div>
      <a id="single_image1" href="#"><img src="http://dummyimage.com/300x200/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <span class="stretch"></span>
  </div>
</div>

Run code Hide result

jsfiddle: http://jsfiddle.net/7985xjud/

I've also tried flexbox:

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item {
  background: tomato;
  padding: 5px;
  margin-top: 10px;
  line-height: 60px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

.big-item {
  width: 300px;
  height: 150px;
}

.small-item {
  width: 100px;
  height: 60px;
}

<ul class="flex-container">
  <li class="flex-item big-item">1</li>
  <li class="flex-item small-item">2</li>
  <li class="flex-item small-item">3</li>
  <li class="flex-item small-item">4</li>
  <li class="flex-item small-item">5</li>
  <li class="flex-item small-item">6</li>
  <li class="flex-item small-item">7</li>
</ul>

Run code Hide result

codepen: https://codepen.io/anon/pen/dRBKWr

How can i do this?

+3

html css flexbox css3 css-grid

Przemen Jul 19 17 at 16:19

source to share

3 answers

The desired layout is not possible with flexbox , at least not in a clean and efficient way. The reasons are explained here: Is it possible for flex items to fit snugly against the items above them?

Layout, on the other hand, is relatively straightforward with CSS grid layout .

grid-container {
  display: grid;                                                 /* 1 */
  grid-auto-rows: 50px;                                          /* 2 */
  grid-gap: 10px;                                                /* 3 */
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));  /* 4 */
}

grid-item:first-child {                                          
  grid-column: 1 / 4;                                            /* 5 */
  grid-row: 1 / 3;                                               /* 5 */
}

/* non-essential decorative styles */
grid-item {
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

<grid-container>
  <grid-item>01</grid-item>
  <grid-item>02</grid-item>
  <grid-item>03</grid-item>
  <grid-item>04</grid-item>
  <grid-item>05</grid-item>
  <grid-item>06</grid-item>
  <grid-item>07</grid-item>
  <grid-item>08</grid-item>
  <grid-item>09</grid-item>
  <grid-item>10</grid-item>
  <grid-item>11</grid-item>
  <grid-item>12</grid-item>
  <grid-item>13</grid-item>
</grid-container>

Run code Hide result

jsFiddle

How it works

Place a block level grid container. ( inline-grid

would be another option)
The property sets the height of automatically generated rows. In this grid, each row is 50 pixels high. grid-auto-rows
Property is shorthand for and . This rule sets a 10px gap between grid items. (This does not apply to the area between items and the container.) grid-gap

grid-column-gap

grid-row-gap
The property sets the width of explicitly defined columns. grid-template-columns

repeat

denotes a repeating column (or row) pattern.

The function tells the grid that it can align as many columns (or rows) as possible without overflowing the container. (This can create similar behavior for a responsive layout .) auto-fill

flex-wrap: wrap

The function sets the minimum and maximum size range for each column (or row). In the above code, the width of each column will be at least 100 pixels of the container and the maximum free space. minmax()

fr

a block is a fraction of the free space in the grid container. This is comparable to the flexbox property flex-grow

.
C and we set the grid area for that particular grid item by defining grid lines. grid-column

grid-row

Browser support for CSS grid

Chrome - Full support as of 8 March 2017 (version 57)
Firefox - Full support as of 6 March 2017 (version 52)
Safari - Full support as of March 26, 2017 (version 10.1)
Edge - Full support as of October 16, 2017 (version 16)
IE11 - no support for the current specification; supports outdated version

Here's the complete picture: http://caniuse.com/#search=grid

Cool grid overlay feature in Firefox

In Firefox dev tools, when you inspect the grid container, there is a tiny grid icon in the CSS declaration. When you click on it, it displays the outline of your grid on the page.

More details here: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

+2

Michael_B Jul 19 17 at 19:01

source to share

Since you've tried flex-box, I highly recommend you explore grid layout. All latest browsers are supported. Defines it as a flex box container when setting display: grid

. There are many examples of using the grid on Google. Using this gives you the freedom to design as you see fit. And the design you showed us can be easily implemented.

0

Sergey Jul 19 17 at 18:48

source to share

Fred gandt · Accepted Answer · 2017-07-19T16:52:13+0000

Mainly using `float: left`

The CSS property float

specifies that an element should be positioned along the left or right side of its container, where text and inline elements will flow around it. The element is then taken from the normal flow of the web page, while still being part of the flow, unlike absolute

positioning .

Although I used CSS and Pseudo Elements counters for numbers <div>

, these rules do not affect the layout.
Positioning relative

and absolute

is only used to control the layout of numbers.

I added <header>

and <footer>

(default display: block;

) to show the interaction between them and floated elements.
By adding clear: both;

in footer

, we can stop it from being pulled into the floater above it, and normal (non-floating) behavior will continue below it.

body {
  counter-reset: num; 
}
div {
  position: relative;
  float: left;
  margin: .5em;
  padding: 3.25em 5em;
  background: tomato;
}
div:first-of-type {
  padding: 7em 10.5em;
}
div:before {
  counter-increment: num;
  content: counter( num );
  position: absolute;
  top: .4em;
  left: .5em;
  font: 3em sans-serif;
  color: white;
}
footer {
  clear: both; /* this breaks the floating behaviour */
}

<header>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</header>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<footer>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</footer>

Run code Hide result

Alternatively, we can detach our floats <div>

from the rest of the layout by wrapping them in <div>

with display: inline-block;

.
As long as its previous and next siblings are not display: inline*

, the wrapper will behave as if it were display: block;

.

body {
  counter-reset: num; 
}
.floaters {
  display: inline-block; /* will not display inline with sibling blocks */
}
.floaters div {
  position: relative;
  float: left;
  margin: .5em;
  padding: 3.25em 5em;
  background: tomato;
}
.floaters div:first-of-type {
  padding: 7em 10.5em;
}
.floaters div:before {
  counter-increment: num;
  content: counter( num );
  position: absolute;
  top: .4em;
  left: .5em;
  font: 3em sans-serif;
  color: white;
}

<header>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</header>
<div class="floaters">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<footer>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</footer>

Run code Hide result

How do I fit two rows of smaller items to match the larger item?

Mainly using float: left (adsbygoogle = window.adsbygoogle || []).push({});

jsFiddle

More articles:

Mainly using `float: left`