change order of grid style (masonry) - css

i have a grid style:
<div class="masonry">
<div class="item">10</div>
<div class="item">9</div>
<div class="item">8</div>
<div class="item">7</div>
<div class="item">6</div>
<div class="item">5</div>
<div class="item">4</div>
<div class="item">3</div>
<div class="item">2</div>
<div class="item">1</div>
</div>
css:
.masonry {
column-count: 5;
column-gap: 1em;
margin-top: 20px;
}
.item {
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
the result is in this picture (items orders by column):
Current image
but i want to order items by row.First, fill in the first row, then second row and etc.like this photo my favorite state


I did with flexbox see below code, I believe this is what you are looking for
.masonry {
margin-top: 20px;
display: flex;
flex-direction: row-reverse;
align-items: flex-end;
flex-wrap: wrap;
}
.item {
margin: 0 0 1em;
width: 20%;
}
<div class="masonry">
<div class="item">10</div>
<div class="item">9</div>
<div class="item">8</div>
<div class="item">7</div>
<div class="item">6</div>
<div class="item">5</div>
<div class="item">4</div>
<div class="item">3</div>
<div class="item">2</div>
<div class="item">1</div>
</div>

Related

CSS Grid is being vertical

I'm new to CSS Grid and I want to create a grid of divs. I want the grids to be fill up horizontally--filling up the pink div, but instead they go vertical like in the snippet below. I've tried everything, how do I fix it
.mygrid
{
background-color: pink;
display: grid;
gap: 2px;
grid-template-columns: 30px 40px;
}
.item
{
background-color: blue;
}
<div class="mygrid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
</div>

You should define the columns to half and half, using the "fr" unit.
.mygrid
{
background-color: pink;
display: grid;
gap: 2px;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
.item
{
background-color: blue;
}
<div class="mygrid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
</div>

Your problem comes from grid-template-columns property.
You can use the auto param get the same size of columns.
Follow this doc for more information : https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
.mygrid
{
background-color: pink;
display: grid;
gap: 2px;
grid-template-columns: auto auto auto;
}
.item
{
background-color: blue;
}
<div class="mygrid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
</div>

use grid-template-columns: auto auto; to fill the entire pink box,
.mygrid
{
background-color: pink;
display: grid;
grid-template-columns: auto auto auto;
gap: 2px;
}
View on codepen for more detail : link

How to horizontally center cells inside a parent with display:grid [duplicate]

I am using CSS grid to layout some items like this...
#container {
display: grid;
grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%;
}
.item {
background: teal;
color: white;
padding: 20px;
margin: 10px;
}
<div id="container">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
How can I get the last row to be centered instead of left aligned? I can't guarantee the number of items so want to make the layout look right for any number of items.
Is this something I should be using flexbox for instead? Or are CSS grids a suitable use?

CSS Grid isn't suited for alignment across an entire row because of crisscrossing tracks blocking the way. Here's a detailed explanation:
Aligning grid items across the entire row/column (like flex items can)
As an alternative, use flexbox with justify-content: center.
This packs all items in the horizontal center of the row. Then your margins push them apart.
On fully-filled rows, justify-content will have no effect since there's no free space for it to work.
On rows with free space (in your case, only the last row), the items are centered.
#container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.item {
flex: 0 0 calc(16.66% - 20px);
background: teal;
color: white;
padding: 20px;
margin: 10px;
}
* {
box-sizing: border-box;
}
<div id="container">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>

Found a great article on how to Control Leftover Grid Items with Pseudo-selectors
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 20px;
margin: 20px;
padding: 20px;
}
.item {
grid-column: span 2;
background: #AB47BC;
padding: 20px;
}
/* Dealing with 2 orphan items */
.item:last-child:nth-child(3n - 1) {
grid-column-end: -2;
}
.item:nth-last-child(2):nth-child(3n + 1) {
grid-column-end: 4;
}
/* Dealing with single orphan */
.item:last-child:nth-child(3n - 2) {
grid-column-end: 5;
}
<div class="wrapper">
<div class="grid grid--1">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="grid grid--2">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>

That defeats the purpose of a grid system. A grid is a 2 dimensional array where everything has an X and Y value, like a spreadsheet.
Yes, you want a system where the items wrap. Flexbox fits the bill here because of flex-wrap.
#container {
padding: 10px;
width: calc((100px + (10px * 2)) * 4); /* item width + padding on either side times number of items */
display: flex;
flex-wrap: wrap;
background: blue;
margin: 10px;
}
#container div {
width: 100px;
height: 100px;
flex-grow: 1;
background: red;
margin: 10px;
}
https://jsfiddle.net/0c0hzh8t/
This makes the children occupy all the available space, which if the row is full will be none and it'll be its standard size.
If you want the container to be sized automatically, then remove the width property and the container and its items will be resized automatically. It's just as well, but I assume you want to define the amount of items in a row.

This should center any item inside row without using flex
.center-item {
grid-column: 1 / -1;
}

There is no specific property for making the last row behave differently than the previous ones.
Still, based on the fact that you define a set width that match n items within the viewport's width, you can use Flexbox and its justify-content property.
Set it to center and it will center the last row for any number of items.
Stack snippet
html, body {
margin: 0;
}
#container {
display: flex;
flex-wrap: wrap; /* allow items to wrap */
justify-content: center; /* horizontally center items */
}
.item {
flex-basis: calc(16.666% - 20px); /* subtract the margin from the width */
background: teal;
color: white;
padding: 20px;
margin: 10px;
box-sizing: border-box; /* make padding be included in the set width */
}
<div id="container">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>

Codepen
<div class="grid grid-cols-3 justify-items-center gap-2">
<div class="w-5">1</div>
<div class="w-5">2</div>
<div class="w-5">3</div>
<div class="w-5">4</div>
<div class="w-5">5</div>
<div class="w-5">6</div>
<div class="w-5">7</div>
<div class="w-5">8</div>
<div class="w-5">9</div>
<div class="col-span-3">0</div>
</div>
.col-span-3 {
grid-column: span 3 / span 3;
}
.grid {
display: grid;
}
.w-5 {
width: 1.25rem;
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.justify-items-center {
justify-items: center;
}
.gap-2 {
gap: 0.5rem;
}

I didn't work much on grids but as far as I know if you want to use Flex-box use this code.
#container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.item {
flex: 1;
flex-basis: 16.66%;
background: teal;
color: white;
padding: 20px;
margin: 10px;
}
<div id="container">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
Appreciate if useful. Ignore if not.

This is my solution (as of April 23, 2018) for writing HTML emails:
#wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-row-gap: 0;
grid-column-gap: 15px;
padding: 15px 15px 0 15px;
}
.item {
border: 1px solid #000;
height: 200px;
margin-bottom: 15px;
}
<div style="width: 100%; margin: 0 auto; text-align: center; vertical-align: middle;">
<div style="overflow: auto; height: 400px; margin-top: 15px;">
<div style="position: relative">
<div id="wrapper">
<div class="item"><div>Item 1</div></div>
<div class="item"><div>Item 2</div></div>
<div class="item"><div>Item 3</div></div>
<div class="item"><div>Item 4</div></div>
<div class="item"><div>Item 5</div></div>
<div class="item"><div>Item 6</div></div>
<div class="item"><div>Item 7</div></div>
<div class="item"><div>Item 8</div></div>
</div>
<div style="position: absolute; bottom: -30px; text-align: center; margin: 0 auto; width: 100%;">
<div style="background-color: #defabc; width: 300px; margin: 0 auto; text-align: center; cursor: pointer;">
<span style="color: #000;">See all items</span>
</div>
</div>
</div>
</div>
</div>
What it does is, you're able to position items to the center at the very bottom of the grid wrapper. Again, like all other solutions, you can't put something inside a grid wrapper to be center-aligned in the very last row.
But at least this is a good alternative solution as a workaround.

How to set width of a flexbox div

Please look my code in the JSFiddle link.
Now, the output looks like this:
Please help me change the code so it looks like this:
CSS:
.card {
display: contents;
}
.card > div {
width: 150px;
height: 120px;
margin: 10px;
}
.breakLine::after {
content: '';
width: 100%;
}
.hiddenCard {
background-color: red;
}
.cardList {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.MemoryGame {
display: flex;
align-items: center;
flex-direction: column;
}
.controlSection {
display: flex;
justify-content: space-between;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
HTML:
<body>
<div id="root">
<div>
<div class="MemoryGame">
<h1>Memory Game !</h1>
<div class="gameWrapper">
<div class="controlSection">
<h2>score: 5</h2>
<h2>level: 3</h2>
</div>
<div class="cardList">
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card breakLine">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card breakLine">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card breakLine">
<div class="hiddenCard"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>

.card {
display: contents;
}
.card > div {
width: 150px;
height: 120px;
margin: 10px;
}
.breakLine::after {
content: '';
width: 100%;
}
.hiddenCard {
background-color: red;
}
.cardList {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gameWrapper{
max-width: 90%;
}
.MemoryGame {
display: flex;
align-items: center;
flex-direction: column;
}
.controlSection {
display: flex;
justify-content: space-between;
margin: 0 2rem;
}
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}

Try with the following CSS for the controlSection
.controlSection {
width: 660px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
I just set the width to the width of the boxes (150*4 width + margin 10*6 = 660px) and aligned the container to the middle with margin: 0 auto;
This is not really responsive though.
Good luck

You can try this: justify-content:space-around;
.controlSection {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: row;
}
.card {
display: contents;
}
.card > div {
width: 150px;
height: 120px;
margin: 10px;
}
.breakLine::after {
content: '';
width: 100%;
}
.hiddenCard {
background-color: red;
}
.cardList {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.MemoryGame {
display: flex;
align-items: center;
flex-direction: column;
}
.controlSection {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: row;
text-align:center;
}
<div class="MemoryGame">
<h1>Memory Game !</h1>
<div class="gameWrapper">
<div class="controlSection">
<h2>score: 5</h2>
<h2>level: 3</h2>
</div>
<div class="cardList">
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card breakLine">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card breakLine">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card breakLine">
<div class="hiddenCard"></div>
</div>
</div>
</div>
</div>
If this does not work for you, you may need to set boundaries by assigning width to the parent container. Like so,
.controlSection {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width:65%;
margin: 0 auto;
}
.card {
display: contents;
}
.card > div {
width: 150px;
height: 120px;
margin: 10px;
}
.breakLine::after {
content: '';
width: 100%;
}
.hiddenCard {
background-color: red;
}
.cardList {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.MemoryGame {
display: flex;
align-items: center;
flex-direction: column;
}
.controlSection {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width:65%;
margin: 0 auto;
}
<div class="MemoryGame">
<h1>Memory Game !</h1>
<div class="gameWrapper">
<div class="controlSection">
<h2>score: 5</h2>
<h2>level: 3</h2>
</div>
<div class="cardList">
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card breakLine">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card breakLine">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card breakLine">
<div class="hiddenCard"></div>
</div>
</div>
</div>
</div>

The justify-content property is a sub-property of the Flexible Box Layout module.
space-between items are evenly distributed in the line; the first item is on the start line, the last item on the end line.
space-around items are evenly distributed in the line with equal space around them.
Change the justify-content: space-between to space-around. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.
.card {
display: contents;
}
.card > div {
width: 150px;
height: 120px;
margin: 10px;
}
.breakLine::after {
content: '';
width: 100%;
}
.hiddenCard {
background-color: red;
}
.cardList {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.MemoryGame {
display: flex;
align-items: center;
flex-direction: column;
}
.controlSection {
display: flex;
justify-content: space-around;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>React App</title>
</head>
<body>
<div id="root">
<div>
<div class="MemoryGame">
<h1>Memory Game !</h1>
<div class="gameWrapper">
<div class="controlSection">
<h2>score: 5</h2>
<h2>level: 3</h2>
</div>
<div class="cardList">
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card breakLine">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card breakLine">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card breakLine">
<div class="hiddenCard"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

You could add an extra div, to wrap it up all together
<!-- the whole game area, including the white area -->
<div id="main-div">
<!-- only the area where stuff should be displayed -->
<!-- the title div and the header div will align accordingly with the width of the game div -->
<div id="game-wrapper">
<div id="title">
<p>memory game</p>
</div>
<div id="header">
<p>score: 5</p>
<p>level: 3</p>
</div>
<div id="game">
<!-- actual game -->
</div>
</div>
</div>

CSS manage nested flexbox width by content priority

I struggling with flexbox wrapping.
I have this 2 levels list:
<div class="wrapper">
<div class="list list-1">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
<div class="list list-2">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>
<div class="item">★</div>
</div>
The HTML structure can be modified if its needed.
Base on wrapper width render should fit these rules:
mimic one list (same margin between all items);
The first item of all lists have to be visible;
but list-1 content has priority of list-2;
items only complete item can be visible in the list;
Render example:
1 A X
1 2 3 A X
1 2 3 4 5 6 7 8 9 A X
1 2 3 4 5 6 7 8 9 A B C D E F X
With my current achievement, I miss the priority wrapping (the both list get the same width and number of elements), and the spaces between items in both lists are not the same.
.wrapper {
display: flex;
flex-flow: row nowrap;
width: 100%;
height: 37px;
border-radius: 5px;
background-color: #222;
justify-content: flex-end;
}
.list {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.list div:not(:first-child) {
margin-left: 2px;
}
.item {
display: flex;
width: 45px;
height: 26px;
align-items: center;
justify-content: center;
margin: 4px 4px 10px;
color: #fff;
background-color: #3d3d3d;
}
Any idea are welcome!

You can add flex-shrink:0 to the first list so it will never shrink and you will have your priority rule and add min-width:0 to the other list to allow it to shrink when there isn't enough space. You should also allow the wrap so that you don't see half an element when it overflow.
With your new rule there will be a wrong space with the last element.
.wrapper {
display: flex;
flex-flow: row nowrap;
height: 37px;
border-radius: 5px;
background-color: #222;
justify-content: flex-end;
}
.list {
display: flex;
flex-wrap:wrap;
}
/*added this*/
.list-1 {
flex-shrink:0;
}
.list-2 {
min-width:0;
overflow:hidden;
}
/**/
.item {
display: flex;
width: 45px;
height: 26px;
align-items: center;
justify-content: center;
margin: 4px 4px 10px;
color: #fff;
background-color: #3d3d3d;
flex-shrink:0; /*this is also mandatory to avoid the item to shrink*/
}
<div class="wrapper">
<div class="list list-1">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
<div class="list list-2">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>
<div class="item">★</div>
</div>
Without overlfow here is a hack to hide the non needed element:
.wrapper {
display: flex;
flex-flow: row nowrap;
height: 37px;
border-radius: 5px;
background-color: #222;
justify-content: flex-end;
}
.list {
display: flex;
flex-wrap:wrap;
position:relative;
align-self: flex-start;
}
.list::after {
content:"";
position:absolute;
bottom:0;
top:37px;
left:0;
right:0;
background:#fff;
}
/*added this*/
.list-1 {
flex-shrink:0;
}
.list-2 {
min-width:0;
}
/**/
.item {
display: flex;
width: 45px;
height: 26px;
align-items: center;
justify-content: center;
margin: 4px 4px 10px;
color: #fff;
background-color: #3d3d3d;
flex-shrink:0; /*this is also mandatory to avoid the item to shrink*/
}
<div class="wrapper">
<div class="list list-1">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
<div class="list list-2">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>
<div class="item">★</div>
</div>

Responsive, dynamic thumbnail gallery: The last row doesn't work

i want to create a responsive thumbnail gallery: http://www.moviesite.de/TEST/MAM/imagewall.html
Everything works, except for the last row:
The images are too big. What can i do, that these images are as big as the images in the rows before?
Thanks

You need to add ghost/filler elements.
I found a fiddle with a solution for your Problem here.
.container {
display: flex;
flex-flow: row wrap;
padding: 0.5em;
background-color: royalblue;
}
.item {
flex: 1 0 80px;
margin: 0.5em;
padding: 1em;
text-align: center;
background-color: lightblue;
}
.filler {
flex: 1 0 80px;
height: 0px;
margin: 0 0.5em;
padding: 0 1em;
}
<div class="container">
<div class="item">sm</div>
<div class="item">medium</div>
<div class="item">large item</div>
<div class="item">medium</div>
<div class="item">medium</div>
<div class="item">large item</div>
<div class="item">sm</div>
<div class="item">sm</div>
<div class="item">medium</div>
<div class="item">large item</div>
<div class="item">medium</div>
<div class="item">medium</div>
<div class="item">large item</div>
<div class="item">sm</div>
<div class="filler"></div>
<div class="filler"></div>
<div class="filler"></div>
<div class="filler"></div>
<div class="filler"></div>
<div class="filler"></div>
<div class="filler"></div>
<div class="filler"></div>
</div>

Resources