-2

I want to know how to create this kind of layout. What would be the best way to achieve this?

enter image description here

The container of this elements is using this styles:

.script-objections-container {
display: flex;
flex-flow: row wrap;
align-content: space-between;
width: 100%;
counter-reset: items;
overflow-y: auto;
}

The elements style:

.script-objection-container {
background-color: #fff;
border: 2px solid #ead5ff;
box-shadow: 0 3px 6px rgb(230 233 244 / 60%);
border-radius: 8px;
padding: 15px;
width: 48%;
margin-top: 0;
margin-bottom: 2%;
margin-left: 0;
margin-right: 2%;
}

.script-objection-container .script-objection-header {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 21px;
color: #375591;
}

The amount of elements is not fixed, can be any number. I want it to make two columns of equal amount of elements, and with any height (not expanding the elements height to the maximum height for the row)

Html code with AngularJS of elements

<div class="script-objections-container">
    <!-- ngRepeat: Objection in GetObjections() --><div ng-repeat="Objection in GetObjections()" class="script-objection-container ng-scope">
        <div>
            <label class="script-objection-header ng-binding">Test</label>
            <!-- ngRepeat: Item in Objection.Items --><div ng-repeat="Item in Items" class="script-objection-subject-text ng-scope">
                <div style="display: inline-block; vertical-align: top; width: 10px;">
                    <a ng-click="ExpandOrCollapse(item)" ng-show="!!item.IsExpanded">
                        <img src="/images/triangle-expanse.svg">
                    </a>
                    <a ng-click="ExpandOrCollapse(item)" ng-show="!item.IsExpanded" class="ng-hide">
                        <img src="/images/triangle-collapse.svg">
                    </a>
                </div>
                <div class="script-objection-subject">
                    <label ng-click="ExpandOrCollapse(item)" class="ng-binding">This is a test</label>
                </div>
                <!-- ngIf: !item.IsExpanded -->
            </div><!-- end ngRepeat: Item in Items -->
        </div>
    </div>
</div>

This is what I've got now:

enter image description here

.script-objections-container {
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  width: 100%;
  counter-reset: items;
  overflow-y: auto;
}

.script-objection-container {
  background-color: #fff;
  border: 2px solid #ead5ff;
  box-shadow: 0 3px 6px rgb(230 233 244 / 60%);
  border-radius: 8px;
  padding: 15px;
  width: 48%;
  margin-top: 0;
  margin-bottom: 2%;
  margin-left: 0;
  margin-right: 2%;
}

.script-objection-container .script-objection-header {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: #375591;
}
<div class="script-objections-container">
  <div class="script-objection-container ng-scope">
    <div>
      <label class="script-objection-header ng-binding">Test</label>
      <div ng-repeat="Item in Items" class="script-objection-subject-text ng-scope">
        <div style="display: inline-block; vertical-align: top; width: 10px;">
          <a ng-click="ExpandOrCollapse(item)" ng-show="!!item.IsExpanded">
            <img src="/images/triangle-expanse.svg">
          </a>
          <a ng-click="ExpandOrCollapse(item)" ng-show="!item.IsExpanded" class="ng-hide">
            <img src="/images/triangle-collapse.svg">
          </a>
        </div>
        <div class="script-objection-subject">
          <label ng-click="ExpandOrCollapse(item)" class="ng-binding">This is a test</label>
        </div>
      </div>
      
      <div ng-repeat="Item in Items" class="script-objection-subject-text ng-scope">
        <div style="display: inline-block; vertical-align: top; width: 10px;">
          <a ng-click="ExpandOrCollapse(item)" ng-show="!!item.IsExpanded">
            <img src="/images/triangle-expanse.svg">
          </a>
          <a ng-click="ExpandOrCollapse(item)" ng-show="!item.IsExpanded" class="ng-hide">
            <img src="/images/triangle-collapse.svg">
          </a>
        </div>
        <div class="script-objection-subject">
          <label ng-click="ExpandOrCollapse(item)" class="ng-binding">This is a test</label>
        </div>
      </div>
      
      <div ng-repeat="Item in Items" class="script-objection-subject-text ng-scope">
        <div style="display: inline-block; vertical-align: top; width: 10px;">
          <a ng-click="ExpandOrCollapse(item)" ng-show="!!item.IsExpanded">
            <img src="/images/triangle-expanse.svg">
          </a>
          <a ng-click="ExpandOrCollapse(item)" ng-show="!item.IsExpanded" class="ng-hide">
            <img src="/images/triangle-collapse.svg">
          </a>
        </div>
        <div class="script-objection-subject">
          <label ng-click="ExpandOrCollapse(item)" class="ng-binding">This is a test</label>
        </div>
      </div>
    </div>
  </div>
  
  
  <div class="script-objection-container ng-scope">
    <div>
      <label class="script-objection-header ng-binding">Test</label>
      <div ng-repeat="Item in Items" class="script-objection-subject-text ng-scope">
        <div style="display: inline-block; vertical-align: top; width: 10px;">
          <a ng-click="ExpandOrCollapse(item)" ng-show="!!item.IsExpanded">
            <img src="/images/triangle-expanse.svg">
          </a>
          <a ng-click="ExpandOrCollapse(item)" ng-show="!item.IsExpanded" class="ng-hide">
            <img src="/images/triangle-collapse.svg">
          </a>
        </div>
        <div class="script-objection-subject">
          <label ng-click="ExpandOrCollapse(item)" class="ng-binding">This is a test</label>
        </div>
      </div>
      
      <div ng-repeat="Item in Items" class="script-objection-subject-text ng-scope">
        <div style="display: inline-block; vertical-align: top; width: 10px;">
          <a ng-click="ExpandOrCollapse(item)" ng-show="!!item.IsExpanded">
            <img src="/images/triangle-expanse.svg">
          </a>
          <a ng-click="ExpandOrCollapse(item)" ng-show="!item.IsExpanded" class="ng-hide">
            <img src="/images/triangle-collapse.svg">
          </a>
        </div>
        <div class="script-objection-subject">
          <label ng-click="ExpandOrCollapse(item)" class="ng-binding">This is a test</label>
        </div>
      </div>
      
      <div ng-repeat="Item in Items" class="script-objection-subject-text ng-scope">
        <div style="display: inline-block; vertical-align: top; width: 10px;">
          <a ng-click="ExpandOrCollapse(item)" ng-show="!!item.IsExpanded">
            <img src="/images/triangle-expanse.svg">
          </a>
          <a ng-click="ExpandOrCollapse(item)" ng-show="!item.IsExpanded" class="ng-hide">
            <img src="/images/triangle-collapse.svg">
          </a>
        </div>
        <div class="script-objection-subject">
          <label ng-click="ExpandOrCollapse(item)" class="ng-binding">This is a test</label>
        </div>
      </div>
    </div>
  </div>
</div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
dragnash
  • 97
  • 4
  • Does this answer your question? [CSS-only masonry layout](https://stackoverflow.com/questions/44377343/css-only-masonry-layout) – VelizarStavrev Mar 05 '23 at 21:41

1 Answers1

0

The desired output seems to be the same as this topic: CSS flex-wrap how to make the height do not stretch

Which is considered a duplicate of this topic: CSS-only masonry layout

Which solution implements the use of:

grid-template-rows: masonry
grid-template-columns: masonry
VelizarStavrev
  • 199
  • 1
  • 9