CODEWITHSUNDEEP
htmlcsscss-grid
Kerzegofyo
Kerzegofyo

Reputation: 11

CSS how to separate items when overflow

I am trying to do message application like in image but I don't know how can I separate two blocks in same area. I will be glad if you help.

Here is an example:

enter image description here

Here is my code:

.Grid {
  width: 600px;
  height: 500px;
  display: grid;
  background-color: black;
}

.Sender {
  width: 300px;
  height: 80px;
  justify-self: start;
  background-color: white;
}

.Receiver {
  width: 300px;
  height: 80px;
  justify-self: end;
  background-color: gray;
}
<div class="Grid">
  <div class="Sender">1</div>
  <div class="Receiver">2</div>
  <div class="Sender">3</div>
  <div class="Receiver">4</div>
  <div class="Sender">5</div>
  <div class="Receiver">6</div>
  <div class="Sender">7</div>
  <div class="Receiver">8</div>
  <div class="Sender">9</div>
  <div class="Receiver">10</div>
  <div class="Sender">11</div>
  <div class="Receiver">12</div>
</div>

Upvotes: 1

Views: 86

Answers (1)

Chirag
Chirag

Reputation: 107

Please check below code and let me know if it helps

Watch in "Full page" mode to see the effect.

.Grid {
  width: 600px;
  float: left;
  background-color: black;
}

.Sender {
  float: left;
  width: 300px;
  height: 80px;
  justify-self: start;
  background-color: white;
}

.Receiver {
  float: right;
  margin-left: 1px;
  width: 300px;
  height: 80px;
  justify-self: end;
  background-color: gray;
}
<div class="Grid">
  <div class="Sender">1</div>
  <div class="Receiver">2</div>
  <div class="Sender">3</div>
  <div class="Receiver">4</div>
  <div class="Sender">5</div>
  <div class="Receiver">6</div>
</div>
<div class="Grid">
  <div class="Sender">7</div>
  <div class="Receiver">8</div>
  <div class="Sender">9</div>
  <div class="Receiver">10</div>
  <div class="Sender">11</div>
  <div class="Receiver">12</div>
</div>

Upvotes: 1

Related Questions