I have a regular img tag with src pointing to an image
on large/tall images object-fit is stretching images instead of showing them as they should.
Using contain resolves the issue but this is not the desired effect.
Is there any misconfiguration from my side ? or there is a css issue here ? I would appreciate if someone knows a solution.
The HTML:
<div class="container">
<div>
<img src="image-url" class="image" >
<div>
<h2>title</h2>
<p>description</p>
</div>
</div>
</div>
The CSS
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 20px;
margin: 20px 0;
}
.image {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 10px 10px 0 0;
}
Related
This question already has answers here:
How to vertically align text inside a flexbox?
(13 answers)
Closed last year.
Here's an SO question about exactly this, and I've found several others. Many of them have a dozen answers, using many (many!) combinations of align and justify styles, transforms, margins, references to table cells, etc.
I've tried maybe 200 combinations of ideas from references. Is it possible to center the text vertically? Is it possible to do it while maintaining 100% height without adding divs around or inside the boxes?
My main finding after all this is that height: 100% thwarts every other style that can succeed. For example, margin-top and margin-bottom set to auto works, but not with 100% height.
section {
height: 400px;
}
#boxes {
background-color: green;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 6px;
height: 100%;
min-height: 10em;
min-width: 12em;
}
#boxes>div {
background-color: #8ca0ff;
text-align: center;
border: 1px solid red;
height: 100%;
}
<section>
<div id="boxes">
<div id="00">I'm not</div>
<div id="01">vertically</div>
<div id="02">centered.</div>
<div id="10">I</div>
<div id="11">am not</div>
<div id="12">either!</div>
<div id="20">Was CSS designed</div>
<div id="21">by a psychopath?</div>
<div id="22">Seems like it!</div>
</div>
</section>
I am astonished at how non-simple this simple-seeming thing is.
Put flex on the boxes, just like in an answer on the post you linked.
https://css-tricks.com/snippets/css/a-guide-to-flexbox
section {
height: 400px;
}
#boxes {
background-color: green;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 6px;
height: 100%;
min-height: 10em;
min-width: 12em;
}
#boxes>div {
background-color: #8ca0ff;
text-align: center;
border: 1px solid red;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
<section>
<div id="boxes">
<div id="00">I'm not</div>
<div id="01">vertically</div>
<div id="02">centered.</div>
<div id="10">I</div>
<div id="11">am not</div>
<div id="12">either!</div>
<div id="20">Was CSS designed</div>
<div id="21">by a psychopath?</div>
<div id="22">Seems like it!</div>
</div>
</section>
So I have these carousel thumbnails that supposedly keep adding to the right until each of them reached the width of 120px and they'll go into the next row. These thumbnails are wrapped by a wrapper which its width fits its content.
HTML:
<div class="carousel-thumbnail-wrapper">
<div class="carousel-thumbnail mod-active">
<img src="./img/project-slider-1.jpg" alt="">
</div>
<div class="carousel-thumbnail">
<img src="./img/project-slider-2.jpg" alt="">
</div>
</div>
CSS:
.cg-carousel > .carousel-thumbnail-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
column-gap: 8px;
width: fit-content; /** the width fits its content... */
max-width: 100%; /** ...but can only grow not more than 100% of its parent's */
}
.cg-carousel > .carousel-thumbnail-wrapper > .carousel-thumbnail {
box-sizing: border-box;
border-radius: var(--border-radius-xs);
cursor: pointer;
position: relative;
margin-bottom: 8px;
max-width: 200px; /** each thumbnail has maximum 200px width */
}
Normally, if everything goes right it will show like this: Images keep adding to the right
It does work like that sometimes. But when I refresh the page or go to another page back to back, for some reason they're stacking, like this: Images suddenly stacking
What did I do wrong?
So your code isn't wrong per se, but your selectors are a little off, and your images need a width of 100%, otherwise they will not resize - their parent will, but they will still remain their original size. So if you change your selectors so that they actually target the elements in your html, and set the width of the images to 100%, it should work perfectly. The javascript in my other answer makes your code fully fool-proof as it combats any css issues older browsers may face. But if old browsers are not a problem, then use this answer. Below is a snippet. Here is a jsfiddle link if you want to resize the viewport, add images or play with the code in general: https://jsfiddle.net/258b9x6e/1/
.carousel-thumbnail-wrapper {width: 100%}
.carousel-thumbnail-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
column-gap: 8px;
width: fit-content; /** the width fits its content... */
max-width: 100%; /** ...but can only grow not more than 100% of its parent's */
}
.carousel-thumbnail {
box-sizing: border-box;
border-radius: var(--border-radius-xs);
cursor: pointer;
position: relative;
margin-bottom: 8px;
max-width: 200px; /** each thumbnail has maximum 200px width */
}
img {
width: 100%;
}
<div class="carousel-thumbnail-wrapper">
<div class="carousel-thumbnail mod-active">
<img src="https://via.placeholder.com/200" alt="">
</div>
<div class="carousel-thumbnail">
<img src="https://via.placeholder.com/200" alt="">
</div>
</div>
The following snippet will resize the images, to make them small enough to be able to fit on one row, until they are 120px in width, which is when they will no longer be shrunk, but moved to the next row. This achieves the same results as my other answer, but also works on older browsers, at the expense of having to use JS. My other answer only works on newer browsers but does not need any JS.
Here, I've used 3 imgs but you can use as many as you would like This is also responsive, so you can resize your browser and the images will still fit well.
document.querySelectorAll("img")[document.querySelectorAll("img").length-1].onload = re_calculate_image_width;
function re_calculate_image_width() {
let count = document.querySelectorAll(".img-wrapper").length;
document.querySelector(".outer-wrapper").style.setProperty("--how-many", (count).toString());
}
alert("Important: Read this: \n If you dynamically add more images, you MUST call the ***re_calculate_image_width*** function when the added images have finished ***loading***.");
.outer-wrapper {
width: 100%;
background: rgba(255,255,0,0.6);
--how-many: 5;
}
.img-wrapper {
display: inline-block;
min-width: 120px;
max-width: 200px;
width: calc(90% / var(--how-many));
height: auto;
}
img {
display: inline-block;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
box-shadow: 0px 0px 1px 1px #000;
}
<div class="outer-wrapper">
<div class="img-wrapper">
<img src="https://via.placeholder.com/200" alt="">
</div>
<div class="img-wrapper">
<img src="https://via.placeholder.com/200" alt="">
</div>
<div class="img-wrapper">
<img src="https://via.placeholder.com/200" alt="">
</div>
</div>
This question already has answers here:
CSS grid square layout [duplicate]
(4 answers)
Closed 2 years ago.
I want to make a 3x3 grid(the cells are images), using "grid" in css, with this:
Each cell of the grid is a square
The grid is responsive(I don't want something like display:flex; flex-wrap: wrap) I mean when the screen become smaller the cells of the grid are still squares and the grid take 100% width
Other thing that I don't know how to solve is:
In the cells of the grid, put images(the ratio is not like a square), but the images maintain their ratio, I mean like crop a image
What I've tried: I've make the html sintax:
<div class="grid">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Istanbul_Skyline_Be%C5%9Fikta%C5%9F_%C5%9Ei%C5%9Fli.JPG/750px-Istanbul_Skyline_Be%C5%9Fikta%C5%9F_%C5%9Ei%C5%9Fli.JPG">
<img src="https://www.turismoviajar.com/wp-content/uploads/2019/10/paris-2020.jpg">
<img src="https://ice-2020.com/wp-content/uploads/2018/11/GettyImages-674739845-1200x800.jpg">
<img src="https://eufcn.com/wp-content/uploads/2017/11/madrid_filmmadrid.jpg">
<img src="https://www.futbolred.com/files/article_main/uploads/2020/05/29/5ed193de4ae3f.jpeg">
<img src="https://lp-cms-production.imgix.net/2019-06/GettyImages-538096543_medium.jpg?fit=crop&q=40&sharp=10&vib=20&auto=format&ixlib=react-8.6.4">
<img src="https://blog.global-exchange.com/wp-content/uploads/2018/08/Moscu-calles-840.jpg">
<img src="https://www.turismoviajar.com/wp-content/uploads/2019/10/Rio-de-Janeiro-2020.jpg">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQj3iLwvZZO-JzJAPquVMTORT4CPOFURK6fzA&usqp=CAU">
</div>
and the css is
.grid{
display: grid;
width: 100%;
grid-template-columns: auto auto auto;
height: auto;
/*This doesn't work, the height is fit to the images*/
grid-template-rows: auto auto auto;
/* This doesn't work, the cells are not squares*/
}
.grid > img{
width: 100%;
height: 100%;
/*In this way I lose the ratio of the image*/
}
Grid layout is a grid based layout system,with row and columns, it easier to design web pages without using position.
#grid is a incorrect class selection. # is use to select element by Id.
.grid is the correct one.
I hope this code will help you to solve you problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
width: 400px;
height: 250px;
}
.grid{
display: grid;
grid-template-rows: repeat(2,1fr);
grid-template-columns: auto auto auto;
grid-gap: 2px;
}
</style>
</head>
<body>
<div class="grid">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Istanbul_Skyline_Be%C5%9Fikta%C5%9F_%C5%9Ei%C5%9Fli.JPG/750px-Istanbul_Skyline_Be%C5%9Fikta%C5%9F_%C5%9Ei%C5%9Fli.JPG">
<img src="https://www.turismoviajar.com/wp-content/uploads/2019/10/paris-2020.jpg">
<img src="https://ice-2020.com/wp-content/uploads/2018/11/GettyImages-674739845-1200x800.jpg">
<img src="https://eufcn.com/wp-content/uploads/2017/11/madrid_filmmadrid.jpg">
<img src="https://www.futbolred.com/files/article_main/uploads/2020/05/29/5ed193de4ae3f.jpeg">
<img src="https://lp-cms-production.imgix.net/2019-06/GettyImages-538096543_medium.jpg?fit=crop&q=40&sharp=10&vib=20&auto=format&ixlib=react-8.6.4">
<img src="https://blog.global-exchange.com/wp-content/uploads/2018/08/Moscu-calles-840.jpg">
<img src="https://www.turismoviajar.com/wp-content/uploads/2019/10/Rio-de-Janeiro-2020.jpg">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQj3iLwvZZO-JzJAPquVMTORT4CPOFURK6fzA&usqp=CAU">
</div>
</body>
</html>
I saw that you used grid-template-rows twice in your CSS.
If you just change the second one to columns, you should be getting what you want.
.grid {
display: grid;
width: 100%;
height: auto;
grid-template-rows: auto auto auto;
grid-template-columns: auto auto auto;
}
.grid img {
width: 100%;
height: 100%;
}
Result:
Shown Here!
I got it, I solve this in this way
.image-grid {
display: grid;
margin: auto;
height: 90vw; /*This is optional*/
width: 90vw; /*With 100 there is a scrollbar(horizontal),
and I don't find a way to fit 100% without the scrollbar, but
this works fine*/
border: 2px solid black;
grid-template-columns: repeat(3, 30vw);
grid-template-rows: repeat(3, 30vw);
}
.image-grid > img {
width: 100%;
height: 100%;
object-fit: cover;
}
I want to create a 2 column, 3 row image square image gallery.
For some reason when writing code, the height of the boxes are Not filling up grid. How do I make the height of images become square with width?
Code , CSS and HTML below. Images should be touching edge to edge and would like to refrain from naming Pixel size if possible. Isn't there a stretch property or something? Trying to get that to work,
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 0;
padding: 0px;
}
img {
width: 100%;
height: auto;
padding: 0px;
}
<div class="grid-container">
<img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image">
<img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7">
<img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png">
<img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpg">
<img src="https://atlantis.nyc3.digitaloceanspaces.com/styled/1bec9ec74aac91e70b3ef91fee1fc0f9">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3DXqVk9AhGSx2PIYoUepA1UfZFnGt_kY6iJTq3hb10ZLGhFwPQg">
</div>
If you want to fill up the box height. You should use align-items "stretch" property to the grid container.
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);.
grid-template-columns: repeat(3, 1fr);
grid-gap: 0;
padding: 0px;
align-items: stretch;
}
Demo Code
This is your solution and when you resize your window then images will automatically resize.
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 0;
padding: 0px;
align-items: stretch; /* Default. Items are stretched to fit the container */
}
img {
width: 100%;
height:auto;
padding: 0px;
}
<div class="grid-container">
<img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image">
<img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7">
<img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png">
<img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpg">
<img src="https://atlantis.nyc3.digitaloceanspaces.com/styled/1bec9ec74aac91e70b3ef91fee1fc0f9">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3DXqVk9AhGSx2PIYoUepA1UfZFnGt_kY6iJTq3hb10ZLGhFwPQg">
</div>
This is your source link your source code
Try Following code.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
img {
width: 100%;
height: 140px;
}
<div class="grid-container">
<img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image">
<img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7">
<img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png">
<img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpg">
<img src="https://atlantis.nyc3.digitaloceanspaces.com/styled/1bec9ec74aac91e70b3ef91fee1fc0f9">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3DXqVk9AhGSx2PIYoUepA1UfZFnGt_kY6iJTq3hb10ZLGhFwPQg">
</div>
Also make sure to use same size images in case you want to use height:auto
The code below shows the intended behavior when I resize the window in
Chrome 60, and in Firefox 55 (but not in iOS Safari 10.3; that is most likely another question why it misbehaves in Safari).
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0;
background-color: lightgrey;
}
.container {
box-sizing: border-box;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, calc((60vh - 12px)/3));
/*grid-template-rows: 1fr 1fr 1fr;*/
/*grid-template-rows: auto auto auto;*/
height: 60vh;
border: 3px solid yellow;
padding: 3px;
/*grid-gap: 20px;*/ /* <-- would also mess things up */
}
.tile {
}
img {
box-sizing: border-box;
display: block;
object-fit: contain;
width: 100%;
height: 100%;
margin: 0;
border: 0;
padding: 3px;
}
<!-- The image is 200 x 100 px: a green and a blue square next to each other. -->
<div class="container">
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
</div>
It is important that the aspect ratio of the images (2:1)
is preserved. I would have expected either:
grid-template-rows: 1fr 1fr 1fr;
or:
grid-template-rows: auto auto auto;
makes the images fit within the rows of the grid, but neither of them does.
With:
grid-template-rows: repeat(3, calc((60vh - 12px)/3));
I get the desired behavior. How can I avoid working out the math myself? In other words, what should I do so that grid-template-rows: 1fr 1fr 1fr; (or something similar) works?
It is already difficult to work out the height of the container element in CSS on the real page. The goal is to solve it with CSS grid layout; no JavaScript, and no background image hacks.
Update: I originally excluded the background image hack for two reasons.
I thought (due to some misunderstandings) that the background image
url must be in the CSS file, but this is not the case: I can use
inline styles and have it in the HTML.
It felt hackish. After having seen how complicated and messy it gets
with nested flex containers nested inside a grid container just to make it work on Safari, I simply resorted to the background image hack as it is significantly cleaner and works in all browsers tested (Chrome, Firefox, Safari).
In the end, it is not the accepted answer that helped to solve my problem.
You can use grid-template-rows: 1fr 1fr 1fr and more importantly you have to reset the min-width and min-height values of the grid items which defaults to auto (as much as the content).
To provide a more reasonable default minimum size for grid items, this
specification defines that the auto value of min-width/min-height also
applies an automatic minimum size in the specified axis to grid items
whose overflow is visible and which span at least one track whose min
track sizing function is auto. (The effect is analogous to the
automatic minimum size imposed on flex items.)
Source: W3C
This is similar to the auto flex item rule with flexboxes. See demo below where I reset them to zero:
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0;
background-color: lightgrey;
}
.container {
box-sizing: border-box;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
height: 60vh;
border: 3px solid yellow;
padding: 3px;
/*grid-gap: 20px;*/ /* <-- would also mess things up */
}
.tile {
min-width: 0;
min-height: 0;
}
img {
box-sizing: border-box;
display: block;
object-fit: contain;
width: 100%;
height: 100%;
margin: 0;
border: 0;
padding: 3px;
}
<!-- The image is 200 x 100 px: a green and a blue square next to each other. -->
<div class="container">
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
</div>
You have the images set to height: 100%. But 100% of what? 100% of the container? 100% of the viewport? 100% of the row? If so, what's the height of the row?
Chrome and Firefox make an educated guess about your intentions. They have implemented algorithms designed to go beyond spec guidance in order to improve user experience. They call these modifications "interventions".
Safari doesn't do this. Safari adheres strictly to spec language, which states that a percentage height on an element must have a defined height on the parent, otherwise it is ignored.
These browser differences are explained in more detail here:
CSS Grid Row Height Safari Bug
Chrome / Safari not filling 100% height of flex parent
Then you have to consider that grid items, by default, cannot be smaller than their content. If your rows are set to 1fr, but the images are taller than the space allotted, the rows must expand. You can override this behavior with min-height: 0 / min-width: 0 or overflow with any value other than visible.
This behavior is explained in more detail here:
Prevent grid items from stretching in CSS Grid Layout
Why doesn't flex item shrink past content size?
Still, once you factor in the guidance above, you can probably get your layout to work in Safari with a combination of grid and flex properties:
* {
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
background-color: lightgrey;
}
header,
footer {
flex: 0 0 100px;
background-color: tomato;
display: flex;
align-items: center;
justify-content: center;
}
.container {
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto;
padding: 3px;
}
.tile {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
}
img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
padding: 3px;
}
<header>HEADER</header>
<!-- The image is 200 x 100 px: a green and a blue square next to each other. -->
<div class="container">
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
</div>
<footer>FOOTER</footer>
jsFiddle
I don't know how snugly you want the images to fit, but you could use minmax(). minmax() lets you set a minimum and maximum value for the grid-row size. Setting auto for the min and 33% for the max will let them get as small as the content needs to get, and up to 33% of the height of the grid container, but no bigger. This will keep all your grid items together at maximum height of 99% of the 60vh that the grid container takes up.
This is not exactly the automatic way you were hoping to get... you're still declaring a size, even if it's relative. It does avoid the clunky-looking calc((60vh - 12px) / 3), though there's nothing really wrong with using that method, unless there are other constraints in your post.
However, kukkuz' answer and resetting the min-height is a better solution and is what I was missing.
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0;
background-color: lightgrey;
}
.container {
box-sizing: border-box;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, minmax(auto, 33%));
height: 60vh;
border: 3px solid yellow;
padding: 3px;
}
.tile {
display: grid;
}
img {
box-sizing: border-box;
display: block;
object-fit: contain;
width: 100%;
height: 100%;
margin: 0;
border: 0;
padding: 3px;
}
<!-- The image is 200 x 100 px: a green and a blue square next to each other. -->
<div class="container">
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
</div>