Float to right, left and top grid-CodePudding

I have that HTML:

<div >
  <div >A</div>
  <div >B</div>
  <div >C</div>
  <div >D</div>
  <div >E</div>
  <div >F</div>
</div>

I want to obtain that:

Example:

All "cell left" have to be align to left and top. All "cell right" have to be align to right and top.

The layout of the HTML must remain as is. How to define CSS using FLEX or FLOAT? The order or number of cells in each row is not known or regular.

I tried to do it using FLEX or FLOAT, but the right cells are not top-aligned.

CodePudding user response：

Welcome to stackoverflow bartek, check out this solution.
Basically we're creating a flex container that flexes in a column direction so all elements go below each other. Then we increase width so that we have enough room for cells to be on left and cells to be on right. Finally in a flex container you can align elements to start, center, or end vertically or horizontally. And since we have 2 different classes with 2 different alignments, instead of doing a single align-items on the parent element (row) I did 2 self-align on each class, one on flex-start and other on flex-end. Let me know if you have any other questions.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .row {
      display: flex;
      flex-direction: column;
      width: 200px;
    }
    .left {
      align-self: flex-start;
    }
    
    .right {
      align-self: flex-end;
    }
  </style>
</head>
<body>
<div >
  <div >A</div>
  <div >B</div>
  <div >C</div>
  <div >D</div>
  <div >E</div>
  <div >F</div>
</div>
</body>
</html>

CodePudding user response：

A simple solution would be using display: grid.

More about grid layout

Here is a quick example:

.row {
  display: grid;
  width: 500px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: row dense;
  gap: 12px;
  outline: 2px solid #000;
}

.cell {
  padding: 12px;
}

.left {
  grid-column: 1 / span 1;
  background-color: pink;
}

.right {
  grid-column: 2 / span 1;
  background-color: lightgreen;
}

<div >
  <div >A</div>
  <div >B</div>
  <div >C</div>
  <div >D</div>
  <div >E</div>
  <div >F</div>
</div>