Question 230373 in CSS Question posted in
Some basic documentation can be found here.

i need help to create gridflex layout (CSSSCSS)

I have a problem too layout elements in a box on my website…

I want to build a 900x900px size box and put items in there, and when I reach the height limit of 900, then it will be split into two columns
attached picture to explain.

.box {
  width: 900px;
  height: 900px;
}

.element {
  width: 70px;
  height: 70px;
}
<div class="box" id="">
  <div class="element" id="">1</div>
  <div class="element" id="">2</div>
  <div class="element" id="">3</div>
  <div class="element" id="">4</div>
  <div class="element" id="">5</div>
  <div class="element" id="">6</div>
  <div class="element" id="">7</div>
  <div class="element" id="">8</div>
  ......
</div>

example

I tried playing with flexbox and grid but I didn’t succeed.

Tags:

2

Answers


  1. 0

    you can use a combination of flexbox and CSS grid. Here’s your updated Code:

    .box {
  width: 900px;
  max-height: 900px;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  border: 1px solid #000;
}

.element {
  width: calc(50% - 10px); /* Adjust the width and margin as needed */
  margin: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
}
    <div class="box" id="">
    <div class="element" id="">1</div> 
    <div class="element" id="">2</div> 
    <div class="element" id="">3</div> 
    <div class="element" id="">4</div> 
    <div class="element" id="">5</div> 
    <div class="element" id="">6</div> 
    <div class="element" id="">7</div> 
    <div class="element" id="">8</div>
    <!-- ... other elements ... -->
</div>
    Login or Signup to reply.
  2. 0

    YOu can simply use a flexbox with a flex-direction: column. Then simply apply flex-wrap: wrap to it to allow it breaking into a next column. If you want to start at the right side you can use direction: RTL on the container.

    .box {
  width: 400px;
  height: 400px;
  border: 2px dashed red;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.element {
  height: 70px;
  border: 2px solid blue;
}
    <div class="box" id="">
  <div class="element" id="">1</div>
  <div class="element" id="">2</div>
  <div class="element" id="">3</div>
  <div class="element" id="">4</div>
  <div class="element" id="">5</div>
  <div class="element" id="">6</div>
  <div class="element" id="">7</div>
  <div class="element" id="">8</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search