How can I add padding between two images

Question

I want to make a layout like in the picture below

I tried it with this code

* {
  box-sizing: border-box;
}
.column2 {
  float: left;
  padding: 5px;
}

.column {
  float: left;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
padding: 5px;
}

But i can't add padding between 320x173 and 320x172 images. (I need this in 1366x1080 resolution) How can i padding to this? I need the final result to be like in the image attached

user_13536893 · Answer

Just use grid-box layout by set grid to the display like display: grid; to make columns and rows for your layout and use the grid-column-gap and grid-row-gap to control space between rows and columns and you can simply create particular number of columns and row like

grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr);

the above will create 2 equal columns and 2 equal rows and if you don't want equal rows and columns you can simply specify the size of each row of column according to the size of its parent

grid-template-rows: 200px 150px;
grid-template-columns: 102px 50px;

the above will create 2 rows and columns where the 2 rows first one used to have 200px and second will have 150px and the same on the columns.

but here is an example with your own code

* {
  box-sizing: border-box;
}


/*.column2 {
  float: left;
  padding: 5px;
}

.column {
  float: left;
  padding: 5px;
}

Clearfix (clear floats)
.row::after {
  content: "";
  clear: both;
  display: table;
padding: 5px;
} */

.row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
}

.column {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-row-gap: 20px;
}

user_2685914 · Answer

Will this do?

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  padding: 5px;
}

.row > div {
  margin: 5px;
}

.column {
  display: flex;
  flex-direction: column;
}
.column img {height: 50%;}
.column img:nth-of-type(1) {margin-bottom: 5px;}
.column img:nth-of-type(2) {margin-top: 5px;}

user_14250277 · Answer

* {
  box-sizing: border-box;
}

.row {
    display: flex;
    flex-direction: row;
}
.lg-img-container, .sm-img-container {
    width: 50%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;    
    justify-content: center;
}

.lg-img-container img, .sm-img-container img{
    padding: 10px;
    max-width: 100%;
}

How can I add padding between two images

3 Answers