CODEWITHSUNDEEP
htmlcss
user13691227
user13691227

Reputation:

How can I add padding between two images

I want to make a layout like in the picture below

Image

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;
}
<div class="row">
  <div class="column2">
    <img src="https://placehold.it/700" style="width:100%">
  </div>
  <div class="column">
    <img src="https://placehold.it/320x173" style="width:100%">
    <img src="https://placehold.it/320x172" style="width:100%">
  </div>
</div>

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

Upvotes: 2

Views: 419

Answers (3)

Umutambyi Gad
Umutambyi Gad

Reputation: 4101

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;
}
<div class="row">
  <div class="column2">
    <img src="https://placehold.it/700" style="width:100%; height:100%;">
  </div>
  <div class="column">
    <img src="https://placehold.it/320x173" style="width:100%">
    <img src="https://placehold.it/320x172" style="width:100%">
  </div>
</div>

Upvotes: 3

ajay.16nk
ajay.16nk

Reputation: 92

* {
  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%;
}
<div class="row">
        <div class="lg-img-container">
          <img src="https://placehold.it/700" style="width:100%">
        </div>
        <div class="sm-img-container">
          <img src="https://placehold.it/320x173" style="width:100%">
          <img src="https://placehold.it/320x172" style="width:100%">
        </div>
      </div>

Upvotes: 1

Deadpool
Deadpool

Reputation: 8240

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;}
<div class="row">
  <div class="column2">
    <img src="https://placehold.it/700" style="width:100%">
  </div>
  <div class="column">
    <img src="https://placehold.it/320x173" style="width:100%">
    <img src="https://placehold.it/320x172" style="width:100%">
  </div>
</div>

Upvotes: 2

Related Questions