How can I make this gallery with text please help
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 25px;
grid-row-gap: 25px;
width: 100%;
}
.wrapper>div img {
max-width: 100%;
}
<div id="contents">
<div class="wrapper">
<div>
<img src="one.jpg">
</div>
<div>
<img src="two.jpg" alt="">
</div>
<div>
<img src="one.jpg" alt="">
</div>
<div>
<img src="four.jpg" alt="">
</div>
<div>
<img src="two.jpg" alt="">
</div>
<div>
<img src="four.jpg" alt="">
</div>
</div>
</div>
Instead of using repeat(3, 1fr) make the width of the first column as 2fr.
Using background color to show the structure as I have no image.
.wrapper {
display: grid;
grid-template-columns: 2fr repeat(2, 1fr);
grid-column-gap: 25px;
grid-row-gap: 25px;
width: 100%;
}
.wrapper>div img {
max-width: 100%;
}
.text {
background-color: black;
opacity: 0.25;
color: white;
text-align: center;
}
.wrapper>div {
background-color: green;
}
<div id="contents">
<div class="wrapper">
<div>
<img src="one.jpg">
<div class="text">Image 1</div>
</div>
<div>
<img src="two.jpg" alt="">
</div>
<div>
<img src="one.jpg" alt="">
</div>
<div>
<img src="four.jpg" alt="">
</div>
<div>
<img src="two.jpg" alt="">
</div>
<div>
<img src="four.jpg" alt="">
</div>
</div>
</div>
Related
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 12 months ago.
Hi I am stuck on a css only masonry grid, I have the masonry part but I would like the first column to have a width of about 35% and 2nd column 75%. Any help is appreciated. I have tried with grid and column but it does not seem to work, here is a link to my codepen:
https://codepen.io/louise-fourie/pen/JjOgpZj
<h1>CSS Grid - Masonry Layout</h1>
<div class="grid">
<div class="content flow">
<img src="https://jennac.designshowcase.co.za/wp-content/uploads/2022/01/Mask-Group-15.png" alt="">
</div>
<div class="content flow featured">
<img src="https://unsplash.it/500/200" alt="">
</div>
<div class="content flow">
<img src="https://unsplash.it/500/200" alt="">
</div>
<div class="content flow">
<img src="https://unsplash.it/500/200" alt="">
</div>
<div class="content flow">
<img src="https://unsplash.it/500/200" alt="">
</div>
<div class="content flow">
<img src="https://unsplash.it/500/200" alt="">
</div>
<div class="content flow">
<img src="https://unsplash.it/500/200" alt="">
</div>
<div class="content flow">
<img src="https://jennac.designshowcase.co.za/wp-content/uploads/2022/01/Mask-Group-15.png" alt="">
</div>
<div class="content flow">
<img src="https://unsplash.it/500/200" alt="">
</div>
<div class="content flow">
<img src="https://unsplash.it/500/200" alt="">
</div>
</div>
<style>
.grid {
--gap: 1em;
--columns: 2;
/* max-width: 60rem;
margin: 0 auto; */
display: column;
columns: var(--columns);
gap: var(--gap);
}
.grid > * {
break-inside: avoid;
margin-bottom: var(--gap);
}
img {
max-width: 100%;
width:100%;
}
.flow {
grid-column-start: 1;
grid-column-end: 1;
}
.flow:nth-child(even) {
grid-column-start: 2;
grid-column-end: 12;
}
</style>
Use display grid instead of display column:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.grid {
display: grid;
grid-template-columns: 30% 1fr;
grid-row: unset;
}
.grid>* {
break-inside: avoid;
margin-bottom: var(--gap);
}
img {
max-width: 100%;
width: 100%;
}
.flow {
grid-column-start: 1;
grid-column-end: 2;
}
.flow:nth-child(even) {
grid-column-start: 2;
grid-column-end: 12;
}
</style>
<body>
<div class="grid">
<div class="content flow">
<img src="https://jennac.designshowcase.co.za/wp-content/uploads/2022/01/Mask-Group-15.png" alt="">
<img src="https://unsplash.it/500/200" alt="">
<img src="https://unsplash.it/500/200" alt="">
<img src="https://unsplash.it/500/200" alt="">
<img src="https://unsplash.it/500/200" alt="">
</div>
<div class="content flow">
<img src="https://unsplash.it/500/200" alt="">
<img src="https://unsplash.it/500/200" alt="">
<img src="https://unsplash.it/500/200" alt="">
<img src="https://jennac.designshowcase.co.za/wp-content/uploads/2022/01/Mask-Group-15.png" alt="">
<img src="https://unsplash.it/500/200" alt="">
</div>
</div>
</body>
</html>
I have many images & I want to create a list of images like this:
but I generate this list & images not placed correctly:
For this specific case you could just use a grid with template areas as that gives you good control over positioning.
Essentially your grid will have six columns and six rows.
I'll come back to this shortly and put up a snippet but I thought you might like this idea immediately and look into it in case of use.
UPDATE: here's a snippet using grid. Obviously you'll need to put the right background-image into each div.
.container {
display: grid;
grid-template-columns: repeat(6, 12vw);
grid-template-rows: repeat(6, 12vw);
grid-gap: 1vw;
}
.container div:nth-child(1) {
grid-row: 1/span 2;
grid-column: 1/span 2;
}
.container div:nth-child(14) {
grid-row: 3/ span 2;
grid-column: 3/ span 2;
}
.container div:nth-child(27) {
grid-row: 5/ span 2;
grid-column: 5/ span 2;
}
.container div {
background-image: url(https://i.stack.imgur.com/ukCns.jpg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
<div class="container">
<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></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>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
One way is to group content into html groups and control them that way. Just depends on the overall application of what you're trying to do. This is also responsive as well.
img {
width: 100%;
display: flex;
}
.row {
display: flex;
}
#media(max-width: 768px){
.row {
flex-direction: column;
}
}
.row .group.count-1,
.row .group.count-4 {
width: 33%;
}
#media(max-width: 768px){
.row .group.count-1,
.row .group.count-4 {
width: 100%;
}
}
.row .group.count-4 {
display: flex;
flex-wrap: wrap;
}
.row .group.count-1 img,
.row .group.count-4 img {
margin: 1%;
}
#media(max-width: 768px){
.row .group.count-1 img,
.row .group.count-4 img {
margin: 0 0 1%;
}
}
.row .group.count-1 img {
width: 98%;
}
#media(max-width: 768px){
.row .group.count-1 img {
width: 100%;
}
}
.row .group.count-4 img {
width: 48%;
}
#media(max-width: 768px){
.row .group.count-4 img {
width: 100%;
}
}
<div class="container">
<div class="row">
<div class="group count-1">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
<div class="group count-4">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
<div class="group count-4">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
</div>
<div class="row">
<div class="group count-4">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
<div class="group count-1">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
<div class="group count-4">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
</div>
<div class="row">
<div class="group count-4">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
<div class="group count-4">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
<div class="group count-1">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
</div>
</div>
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 1 year ago.
I am trying to make a gallery that is uneven and staggered by using images and colored divs that are not the same size. I have the columns set to a min of 352px and to auto-fit the screen. So the container with grid looks something like this:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(352px, 1fr));
grid-gap: 20px;
The issue I am having is the tallest picture sets the height of the row and the divs that have the smaller images follow the same height. Is there a way to tell the items in the row to not all be the same size? Or rather just target certain items in each row and tell them to be a specific height?
.grey {
background: #D9D9D9;
}
.tan {
background: #DCCEC8;
}
.light-brown {
background: #DC997D;
}
.brown {
background: #814A3D;
}
.black {
background: #000;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(352px, 1fr));
grid-gap: 20px;
}
.grid > div {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
img {
max-width: 350px;
width: 350px;
}
.overlay {
position: absolute;
width: 350px;
height: 100%;
background: rgba(0, 0, 0, 0.05);
}
h4 {
text-transform: uppercase;
font-size: 26px;
color: #fff;
position: absolute;
z-index: 9;
}
h4:nth-child(2) {
bottom: 35px;
}
h4:nth-child(3) {
font-size: 18px;
margin: 5px 0;
bottom: 5px;
}
.fill {
max-width: 350px;
height: 100%;
width: 100%;
}
<div class='grid'>
<div>
<img class="thumbnail" src="https://picsum.photos/500/600" alt="person" />
<h4>Person One</h4>
<h4>#person1</h4>
<div class="overlay"></div>
</div>
<div><div class="tan fill"></div></div>
<div>
<img class="thumbnail" src="https://picsum.photos/300/220" alt="person" />
<h4>Person TWO</h4>
<h4>#person2</h4>
<div class="overlay"></div>
</div>
<div><div class="black fill"></div></div>
<div>
<img class="thumbnail" src="https://picsum.photos/700/700" alt="person" />
<h4>Person 3</h4>
<h4>#person3</h4>
<div class="overlay"></div>
</div>
<div>
<img class="thumbnail" src="https://picsum.photos/400/400" alt="person" />
<h4>Person four</h4>
<h4>#person4</h4>
<div class="overlay"></div>
</div>
<div>
<img class="thumbnail" src="https://picsum.photos/500/260" alt="person" />
<h4>Person Five</h4>
<h4>#pesron5</h4>
<div class="overlay"></div>
</div>
<div><div class="light-brown fill"></div></div>
<div><div class='brown fill'></div></div>
<div>
<img class="thumbnail" src="https://picsum.photos/600/220" alt="person" />
<h4>Person Six</h4>
<h4>#person6</h4>
<div class="overlay"></div>
</div>
<div><div class="black fill"></div></div>
<div>
<img class="thumbnail" src="https://picsum.photos/200/350" alt="person" />
<h4>Person Seven</h4>
<h4>#person7</h4>
<div class="overlay"></div>
</div>
<div>
<img class="thumbnail" src="https://picsum.photos/500/300" alt="person" />
<h4>Person Eight</h4>
<h4>#person8</h4>
<div class="overlay"></div>
</div>
<div><div class="tan fill"></div></div>
<div>
<img class="thumbnail" src="https://picsum.photos/250/250" alt="person" />
<h4>Person Nine</h4>
<h4>#Person9</h4>
<div class="overlay"></div>
</div>
<div>
<img class="thumbnail" src="https://picsum.photos/300/220" alt="person" />
<h4>Person Ten</h4>
<h4>#person10</h4>
<div class="overlay"></div>
</div>
</div>
Use height on the grid items. Moreover, the headings should be wrapped in a container and their default margins should be overwritten so that headings fit in container with image's height < 150px.
.grey {
background: #d9d9d9;
}
.tan {
background: #dccec8;
}
.light-brown {
background: #dc997d;
}
.brown {
background: #814a3d;
}
.black {
background: #000;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(352px, 1fr));
grid-gap: 20px;
}
.grid>div {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
img {
max-width: 350px;
width: 350px;
}
.overlay {
position: absolute;
width: 350px;
height: fit-content;
background: rgba(0, 0, 0, 0.05);
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
h4 {
text-transform: uppercase;
font-size: 26px;
color: #fff;
z-index: 9;
text-align: center;
margin: 0;
margin-bottom: 10px;
}
.fill {
max-width: 350px;
height: 100%;
width: 100%;
}
.grid-item {
height: fit-content;
height: -moz-fit-content;
}
<div class="grid">
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/500/1000" alt="person" />
<div class="overlay">
<h4>Person One</h4>
<h4>#person1</h4>
</div>
</div>
<div>
<div class="tan fill"></div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/1500/2000" alt="person" />
<div class="overlay">
<h4>Person TWO</h4>
<h4>#person2</h4>
</div>
</div>
<div>
<div class="black fill"></div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/700/1500" alt="person" />
<div class="overlay">
<h4>Person 3</h4>
<h4>#person3</h4>
</div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/400/100" alt="person" />
<div class="overlay">
<h4>Person four</h4>
<h4>#person4</h4>
</div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/500/200" alt="person" />
<div class="overlay">
<h4>Person Five</h4>
<h4>#pesron5</h4>
</div>
</div>
<div>
<div class="light-brown fill"></div>
</div>
<div>
<div class="brown fill"></div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/600/220" alt="person" />
<div class="overlay">
<h4>Person Six</h4>
<h4>#person6</h4>
</div>
</div>
<div>
<div class="black fill"></div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/200/150" alt="person" />
<div class="overlay">
<h4>Person Seven</h4>
<h4>#person7</h4>
</div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/500/300" alt="person" />
<div class="overlay">
<h4>Person Eight</h4>
<h4>#person8</h4>
</div>
</div>
<div>
<div class="tan fill"></div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/250/250" alt="person" />
<div class="overlay">
<h4>Person Nine</h4>
<h4>#Person9</h4>
</div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/300/220" alt="person" />
<div class="overlay">
<h4>Person Ten</h4>
<h4>#person10</h4>
</div>
</div>
</div>
In a CSS grid, you can use grid-column: 1 / -1 to stretch an element across the entire explicit grid. However, if you add new elements and the grid automatically has more columns than explicitly stated, this doesn't have the same effect.
Is there any value I can put instead of -1 that will force the item to stretch all the way to the end of the grid?
In the following example, because grid-auto-flow is set to column, the extra elements add new columns. I want the .stretch element to stretch the entire width of the grid, not just the width of the specified 3x3 grid.
.grid {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-flow: column;
width: 300px;
}
.item {
border: 1px solid red;
padding: 15px;
}
.stretch {
grid-column: 1 / -1;
}
<div class="grid">
<div class="stretch item">
Stretched
</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>
One hacky idea is to make the element span a large number of columns:
.grid {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-flow: column;
width: 300px;
}
.item {
border: 1px solid red;
padding: 15px;
}
.stretch {
grid-column: span 20;
}
<div class="grid">
<div class="stretch item">
Stretched
</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">
<div class="stretch item">
Stretched
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
</div>
Pay attention as this hack works only if you don't specify grid-column-gap and you keep the implicit new column to have auto width.
Adding gaps will break it:
.grid {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap:1px;
grid-auto-flow: column;
width: 300px;
}
.item {
border: 1px solid red;
padding: 15px;
}
.stretch {
grid-column: span 20;
}
<div class="grid">
<div class="stretch item">
Stretched
</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">
<div class="stretch item">
Stretched
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
</div>
Making the implicit column different from auto will break it:
.grid {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-columns:10px;
grid-auto-flow: column;
width: 300px;
}
.item {
border: 1px solid red;
padding: 15px;
}
.stretch {
grid-column: span 20;
}
<div class="grid">
<div class="stretch item">
Stretched
</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">
<div class="stretch item">
Stretched
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
</div>
If you want to consider gaps simply consider margin and in case you want to define width define it on the elements.
.grid {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-flow: column;
width: 300px;
margin-left:-10px;
}
.item {
border: 1px solid red;
padding: 15px;
margin-left:10px;
}
.stretch {
grid-column: span 20;
}
.item:nth-child(n + 8) {
border-color:blue;
min-width:40px;
}
<div class="grid">
<div class="stretch item">
Stretched
</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">
<div class="stretch item">
Stretched
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
</div>
I'm stuck with one problem I don't know how to solve.
I have a grid system with 18 items/boxes in the same size. I need to delete 4 items/boxes and make one big item/box of it.
Please check wireframe below. This is how I want it to look :)
.grid_big {
margin-bottom: 200px;
}
.grid_big .grid_item {
width: 16.6%;
display: inline-block;
float: left;
}
.grid_big .grid_item img {
width: 100%;
border: 1px solid;
/* visibility: hidden; */
}
.grid_big .grid_item .grid_content {
margin: 20px;
}
<div class="grid_big">
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="fixfloat"></div>
</div>
( grid item + grid content x 18 )
You can do something like this with the Grid, which is ideal for this type of a task:
* {box-sizing: border-box}
.grid_big {
display: grid;
grid-template: repeat(3, 1fr) / repeat(6, 1fr); /* grid-template-rows / grid-template-columns */
grid-gap: 10px; /* grid-row-gap / grid-column-gap */
}
/* grab the 7th one and make it span 2 rows & columns */
.grid_item:nth-child(7){
grid-row: span 2;
grid-column: span 2;
}
img {
display: block; /* removes bottom margin/whitespace */
width: 100%;
border: 1px solid;
}
<div class="grid_big">
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
</div>
Grid (grid-template-areas) might solve your problem.