0

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*/
 }
daniel
  • 3
  • 4
  • Please edit your question to include your HTML code also as a [***minimal and reproducible*** example](https://stackoverflow.com/help/minimal-reproducible-example), so we can see the problem you are having and be able to help. – FluffyKitten Jul 25 '20 at 01:05

3 Answers3

0

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>
Daham Akalanka
  • 295
  • 1
  • 10
0

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!

kvncnls
  • 261
  • 2
  • 9
0

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;
}
daniel
  • 3
  • 4