I have arranged few div in three columns layout..But here is the problem that few Div and their content is dynamic and they get visible only when condition is met..I want grid to be present as it it. I have attached the screenshot..You could see that last row is not looking good because last row had only two div present and space is divided 50% between them..though i always want Div to take 33% only regardless of number of items present.
Below is my code:
.container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; font: small-caps bold 24px/1 sans-serif;}.info { flex: 1 1 33%; box-sizing: border-box; border: 1px solid black; height: 100px;}<div class="container"><div class="info">A</div><div class="info">B</div><div class="info">C</div><div class="info">D</div><div class="info">E</div><div class="info">F</div><div class="info">G</div><div class="info">H</div></div>