Trying to organize this images in a grid

Question

So, I'm making a website, using only html css and javascript, and I need to make a image grid like this, I tried using flexbox, but it is always buggy as hell...

.row {
  display: flex;
  padding: 100px;
  color: #A3A3A3;
}

.column {
  flex: 50%;
  align-items: center;
}

.home-6 {
  height: 100vh;
  width: 100%;
  background-color: #DBDBDB;
}

.home-6 .row {
  object-fit: cover;
}

How it looks now:

How I want it to be:

Thanks for your help ;)

user_18193037 · Answer

For your convenience, I created the exact grid you mentioned using some sample images. You can change the image src attributes to your desire.

I started by making a 21x12 grid. (Sizes were determined by examining your given desired output; you can make ratios and change the ratio as desired.)

Let's take a look at what we've done and the main concept that I've used here.

The gallery div is the grid container, and the grid items are all of the direct child elements. When we defined the grid tracks using grid-template-columns and grid-template-rows, grid provided us with numbered lines called grid lines to use for item positioning. A numerical index can be used to refer to each grid line.

Columns begin at one by default, from left to right, and rows begin at one from top to bottom. A single column or row is made up of two grid lines, one on each side, so our 21-column and 12-row grid is made up of 22 column lines and 13 row lines.

The start and end points of the first column are determined by the vertical lines 1 and 2. Lines 2 and 3 belong to the second column, and so on. Similarly, horizontal lines 1 and 2 determine the position of the first row, lines 2 and 3 determine the position of the second row, and so on. Knowing the concepts listed above will help you understand how I've placed each item (image) on our grid.

So then I used the following properties to style each grid item inorder to make desired output.

grid-column-start [Starting grid line of the column where you place the image]
grid-column-end [Ending grid line of the column where you place the image]
grid-row-start [Starting grid line of the row where you place the image]
grid-row-end [Ending grid line of the row where you place the image]

Here's a snippet of CSS code that I used to position the first image in the grid.

.gallery__item--1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}

Similarly, you can position each image using the above properties and generate the desired output.

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; 
}


html {
  box-sizing: border-box;
  font-size: 62.5%; 
}

body {
  font-family: "Nunito", sans-serif;
  color: #333;
  font-weight: 300;
  line-height: 1.6; 
}

.container {
  width: 60%;
  height: 80%;
  margin: 2rem auto; 
}
.gallery {
  display: grid;
  grid-template-columns: repeat(21, 1fr);
  grid-template-rows: repeat(12, 3vw);
}

.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__item--1 {
  grid-column-start: 1;
  grid-column-end: 15;
  grid-row-start: 1;
  grid-row-end: 7;
}
.gallery__item--2 {
  grid-column-start: 15;
  grid-column-end: 22;
  grid-row-start: 1;
  grid-row-end: 7;
}
.gallery__item--3 {
  grid-column-start: 1;
  grid-column-end: 7;
  grid-row-start: 7;
  grid-row-end: 13;
}
.gallery__item--4 {
  grid-column-start: 7;
  grid-column-end: 15;
  grid-row-start: 7;
  grid-row-end: 13;
}
.gallery__item--5 {
  grid-column-start: 15;
  grid-column-end: 22;
  grid-row-start: 7;
  grid-row-end: 13;
}





  
  
  
  HTML 5 Boilerplate

This is your collage:

This is the desired output:

This is the output given by above code:

I hope this is of assistance to you. Also, best of luck with your work! Thank you!

Trying to organize this images in a grid

1 Answers