Margin between columns-CodePudding

As Bootstrap 5 use paddings in columns, I have some problems with some of my columns having a background, or for example when I need to add an embed element. How can I do to have some margins ?

To realize that, I had to do a trick by giving different classes to my 3 grey blocks and add to each one left margin/right margin as each one required.

I wanted to do something like that :

<div >
        <div >
            My blue section
        </div>
    </div>

    <div >
        <div >
            Grey section 1
        </div>
        <div >
            Grey section 2
        </div>
        <div >
            Grey section 3
        </div>
    </div>

But unfortunately I cannot because I will have no margins between my grey items. So I tried to encapsulate like this each grey item :

<div >
        <div >
            <div >
                Grey section 1
            </div>
        </div>
        <div >
            <div >
                Grey section 2
            </div>
        </div>
        <div >
            <div >
                Grey section 3
            </div>
        </div>
    </div>

But this isn't good too because I will have margins from the row on left and right and the total width will be different between the grey section and the blue section.

I had the same problem for videos : I had to embed but if I don't encapsulate my video in a child div, I have no margins and it's a problem.

What could I do for that ?

CodePudding user response：

Since you added the css tag, here's a css alternative solution. There's a property called gap if you use flexbox, grid, and multiple columns to easily add, as straightforward as the property name is, gaps in-between containers. See the snippet below as I reproduced your layout. More on gap here.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  height: 100vh;
  padding: 1rem;
  background-color: #2B2954;
  gap: .5rem;
}

.blue {
  border-radius: 5px;
  background-color: #18161B;
  grid-column: span 3;
  grid-row: span 2;
}

div.box:nth-child(2) {
  border-radius: 5px;
  background-color: #393D41;
  grid-column: 1/2;
  grid-row: 3/4;
}

div.box:nth-child(3) {
  border-radius: 5px;
  background-color: #393D41;
  grid-column: 2/3;
  grid-row: 3/4;
}

div.box:nth-child(4) {
  border-radius: 5px;
  background-color: #393D41;
  grid-column: 3/4;
  grid-row: 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" href="style.css">
</head>

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

</html>

CodePudding user response：

Your second try was good way to make margins between columns, but you have to apply some changes: change row to d-flex justify-content-between and col-4 to for example col-3. It will make whitespace between column and whole element will close in 100% width of parent element.

<div >
        <div >
            <div >
                Grey section 1
            </div>
        </div>
        <div >
            <div >
                Grey section 2
            </div>
        </div>
        <div >
            <div >
                Grey section 3
            </div>
        </div>
    </div>
</div>

To add row gap, just add any mt to main div

CodePudding user response：

If I understand you correctly, you are talking about the spacing between the column items.

Since Bootstrap columns are managed via CSS flexbox since version 4, you can easily achive your goal by also using flexbox utilities.

In this case you only need to set the gap (or column-gap) property for your second row element. And instead of fixed column size classes (col-x) use auto sized col class.

.my-gap-row {
    gap: 20px;
}

<div >
    <div >
        My blue section
    </div>
</div>

<div >
    <div >
        Grey section 1
    </div>
    <div >
        Grey section 2
    </div>
    <div >
        Grey section 3
    </div>
</div>