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;
}
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>
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;
}
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
CSS grid square layout [duplicate]
(4 answers)
Closed 2 years ago.
How can I set my images' height to be the same as its' width?
The height of the images will always need to be the same size as its' width, even when the width of the images changes due to resizing of the browser window.
To explain further, if the width of the images are 500px, then its' height will also need to be 500px. If the window resizes and the width of the images changes to 600px then its' height will also need to change to 600px.
Constraints: Please don't set a fixed width on the grid or images.
Desired Result
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
img {
width: 100%;
object-fit: cover;
}
<div class="grid">
<img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-1.jpg"/>
<img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-2.jpg"/>
<img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-3.jpg"/>
<img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-4.jpg"/>
</div>
Add a div as a container for every image, set the height to 0, and padding-bottom to 100% as a percentage of it's own width:
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.grid div{
width: 100%;
height: 0;
padding-bottom: 100%;
position: relative;
}
img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="grid">
<div>
<img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-1.jpg"/>
</div>
<div>
<img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-2.jpg"/>
</div>
<div>
<img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-3.jpg"/>
</div>
<div>
<img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-4.jpg"/>
</div>
</div>
You can just add align-self: stretch to your img css rule, like so:
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
img {
width: 100%;
object-fit: cover;
align-self: stretch;
}
<div class="grid">
<img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-1.jpg"/>
<img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-2.jpg"/>
<img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-3.jpg"/>
<img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-4.jpg"/>
</div>
absolute css newbie here. all the tutorials and examples i've been finding over the past three days perfectly explain how to set up an image gallery using grid with images of a similar size, but I can't figure out how to set one up with images of variable sizes without having horrible gaps underneath smaller images, like here:
horrible gaps
I've tried using everything under object-fit, and nothing works. i know its because i'm grossly misunderstanding something. i'd like for my image gallery to look like: this mosaic image gallery and to understand how to accomplish this. i can easily do something similar it when it's just a bunch of empty boxes, but for some reason when images get thrown into the mix, i'm not understanding it.
here's my html:
<div class="gallery">
<img src="images/img-1.jpg" alt="nature">
<img src="images/img-2.jpg" alt="nature">
<img src="images/img-3.jpg" alt="nature">
<img src="images/img-4.jpg" alt="nature">
<img src="images/img-5.jpg" alt="nature">
</div>
and css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gallery{
display: grid;
grid-template-areas:
'img-1 img-2 img-3'
'img-4 img-5 .';
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 1rem;
}
img{
display: block;
overflow: hidden;
width: 100%;
}
img-1{
grid-area: img-1;
}
img-2{
grid-area: img-2;
}
img-3{
grid-area: img-3;
}
img-4{
grid-area: img-4;
}
img-5{
grid-area: img-5;
}
i've tried looking at similar answers which want me to set my img{ width: auto; height: 100%}, and when i do, everything disappears from the screen, giving me a blank page.
any and all help is greatly appreciated!
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