Question 190290 in Html Question posted in
Some basic documentation can be found here.

Сubes for photo.HTML CSS

<div class="portfolio__body">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

I’ve tried to do it with flex but it didn’t work.
I want the cubes to be like in the picture

I want the cubes to be like in the picture

Tags:

2

Answers


  1. 0

    You can do something like this, using flexbox as specified. The trick here is to use flex-wrap so the squares do not overflow your container. Have in mind to adjust the max-width of portfolio__body according to your need. Hope this helps.

    .portfolio__body {
  display: flex;
  flex-wrap: wrap;
  max-width: 300px;
  align-items: center;
}

.square {
  width: 100px;
  height: 100px;
  background: red;
  margin: 5px;
}
    <div class="portfolio__body">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>
    Login or Signup to reply.
  2. 0 
    .portfolio__body {
     padding: 0;
     margin: 0;
     list-style: none;
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
}
 .square {
     background: #f00;
     flex: 1 1 calc((100% / 2) - 2rem);
     color: #fff f;
}
 .square::before {
     content: '';
     float: left;
     padding-top: 56%;
}
 
    <ul class="portfolio__body">
  <li class="square">1</li>
  <li class="square">2</li>
  <li class="square">3</li>
  <li class="square">4</li>
  <li class="square">5</li>
  <li class="square">6</li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search