Sub-columns Impossble With Flexbox

26 December 2021 - 1 answer

Cannot integrate these 2 columns, with the sub-columns :

I am forced to use this structure :

<div class="custom_classes">
<div class="custom_classes">col1</div>
<div class="custom_classes">col2</div>
<div class="custom_classes">col 2.1</div>
<div class="custom_classes">col 2.2</div>
<div>

Answer

use CSS grid instead

the simplest way to do this is using CSS grid (and is also repsonsive)

...this css property grid-column

that is a shorthand for grid-column-start and grid-column-end

details:https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column

using the Firefox DevTools I click the grid button in the code, which makes appear me a grid visualizer...

in the paper, I start thinking about... and I find that the best way is creating a 4 columns grid-based.

here is the code if you want to learn it :)

body {
  display: grid;
  place-content: center;
  height: 100vh;
}

.container {
  display: grid;
  gap: 0.5em;
  height: 80vh;
  width: 80vw;
}

.container .child {
  background: lightblue;
  display: grid;
  place-content: center;
}

.child1 {
  grid-column: 1/2;
  grid-row: 1/3;
}

.child2 {
  grid-column: 2/4;
}

.child3 {
  grid-column: 2/3;
}

.child4 {
  grid-column: 3/4;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="style.css">
</head>

<body>
  <div class="container">
    <div class="child child1">col1</div>
    <div class="child child2">col2</div>
    <div class="child child3">col 2.1</div>
    <div class="child child4">col 2.2</div>
  </div>
</body>

</html>

source: stackoverflow.com

← Previous Post

Sub-columns Impossble With Flexbox

26 December 2021 - 1 answer

Answer

use CSS grid instead

here is the code if you want to learn it :)

Related Questions