Is there a way to achieve the same results as `align-items: bottom` on a multicolumn flex layout usi-CodePudding

I know this question probably seems very pointless, but I am very interested as to whether or not there were any ways on css prior to the modern flexbox without using javascript to achieve the same or similar results to:

section {
  width: 400px;
  height: 400px;
  display: flex;
  flex-wrap: wrap;
  align-items: end
}

div {
  flex-basis: calc(33.33% - 4px);
  height: 20px;
  background-color: blue;
  border: 2px solid black;
}

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

I know I could modify the html, and make logical tables, rows, and cells, and just set the align-items: bottom of each cell, like this:

section {
  width: 400px;
  height: 400px;
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  vertical-align: bottom;
  text-align: center;
}

.child {
  width: calc(33.33% - 4px);
  height: 20px;
  border: 2px solid black;
  background-color: blue;
  display: inline-block;
}

.child:nth-child(1n 2) {
  /*Compensating for the width of the newlines in the html code*/
  margin-left: -4px;
}

<section>
  <div >
    <div >
      <div >&nbsp;</div>
      <div >&nbsp;</div>
      <div >&nbsp;</div>
    </div>
  </div>
  <div >
    <div >
      <div >&nbsp;</div>
      <div >&nbsp;</div>
      <div >&nbsp;</div>
    </div>
  </div>
  <div >
    <div >
      <div >&nbsp;</div>
      <div >&nbsp;</div>
      <div >&nbsp;</div>
    </div>
  </div>
</section>

But I was wondering if there was a better and more dynamic way to do this, so that all someone would have to do is add divs, and they wouldn't have to create rows and tables to add more content. I know this doesn't really matter, since any method besides flexbox is obsolete. But I'm just extremely curious on this, and I would be extremely grateful for an answer!

CodePudding user response：

What could be an answer to your question could be CSS Grid which I believe was the go to for situations like this before flexbox. You achieve a grid layout with a higher div (grid-container) and children (grid-item) from there you can control the spacing between the columns and grids. MDN docs

Here is my attempt at recreating your styling with a single div as well as a single set of child divs.

.grid-container {
  display: grid;
  row-gap: 120px;
  grid-template-columns: auto auto auto;
  padding: 10px;
  margin-top: 120px;
}

.grid-item {
  background-color: blue;
  height: 20px;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>  
  <div ></div>
  <div ></div>
  <div ></div>  
  <div ></div>
  <div ></div>
  <div ></div>  
</div>

Hopefully this helps.

CodePudding user response：

Another way to do this would be just using margin-top and margin-bottom.

section {
  width: 400px;
  height: 400px;
  /* the white space interferes with the new lines */
  font-size: 0;
}

section>div {
  display: inline-block;
  height: 20px;
  width: calc(33.33% - 4px);
  background-color: blue;
  border: 2px solid black;
  padding: 0;
  /* set to the default font size */
  font-size: 1em;
  margin-top: 200px;
}

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

It's not a very good approach but will still work.

Also, flexbox arguably has better browser support than calc().