CODEWITHSUNDEEP
htmlcss
MeL17
MeL17

Reputation: 31

How to add a white space between each column boxes

I just wanna ask how to add a white space between each column boxes. I've been trying to figure it out for the past hour but I was not able to find an answer. Here is the code:

HTML:

<div class="row">
    <div class="column" style="background-color:#aaa;">
        <h2>Column 1</h2>
        <p>Some text..</p>
    </div>
    <div class="column" style="background-color:#bbb;">
        <h2>Column 2</h2>
        <p>Some text..</p>
    </div>
    <div class="column" style="background-color:#ccc;">
        <h2>Column 3</h2>
        <p>Some text..</p>
    </div>
    <div class="column" style="background-color:#bbb;">
        <h2>Column 4</h2>
        <p>Some text..</p>
    </div>

CSS

.column {
    float: left;
    width: 25%;
    padding: 15px;
    height: 300px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

Upvotes: 0

Views: 368

Answers (1)

David Thomas
David Thomas

Reputation: 253318

Consider using either CSS Grid or CSS Flex-box for your layout; either of those options will allow you to specify the gap (formerly grid-gap, but since changed to work with both Grid and Flex-box) between items; for example with Grid:

document.querySelector('button').addEventListener('click', (e) => {
  let source = document.querySelector('.row');
  [...source.cloneNode(true).children].forEach(
    (el) => source.append(el)
  );
});
*,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.row {
  /* triggers the use of CSS grid layout: */
  display: grid;
  /* defines four columns each of which is
     1fr - one fractional unit of the available
     space: */
  grid-template-columns: repeat(4, 1fr);
  /* defines a gap of 0.2em above and below each
     grid-row, and of 1em between adjacent grid-
     columns: */
  gap: 0.2em 1em;
  counter-reset: columnCount;
}

.column {
  padding: 15px;
  height: 300px;
  counter-increment: columnCount;
}

h2::after {
  content: ' ' counter(columnCount);
}
<button>Add more content to the row</button>
<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column</h2>
    <p>Some text..</p>
  </div>

Or, with Flex-box; note that with flex-box the gap property doesn't take effect until the contents are sufficiently closely-packed that the space-between declaration of justify is insufficient to keep them separated:

document.querySelector('button').addEventListener('click', (e) => {
  let source = document.querySelector('.row');
  [...source.cloneNode(true).children].forEach(
    (el) => source.append(el)
  );
});
*,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.row {
  /* triggers the use of css flex-box layout: */
  display: flex;
  /* allows the content of the .row element(s)
     to wrap to new lines as required: */
  flex-wrap: wrap;
  /* evenly spaces the child elements of .row
     across the available space (so, by default,
     the items are separated visually from each
     other): */
  justify-content: space-between;
  /* when the children of the .row element are
     too numerous to be spread apart by the use
     of 'justify: space-between' the gap forces
     the gap between horizontal 'rows' of 0.2em
     and between 'columns' of 1em:  */
  gap: 0.2em 1em;
  counter-reset: columnCount;
}

.column {
  padding: 15px;
  height: 300px;
  counter-increment: columnCount;
}

h2::after {
  content: ' ' counter(columnCount);
}
<button>Add more content to the row</button>
<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column</h2>
    <p>Some text..</p>
  </div>
</div>

CSS Multi-column is a little different and, currently, less easily used and styled for layout; but it does allow some appropriate customisation:

document.querySelector('button').addEventListener('click', (e) => {
  let source = document.querySelector('.row');
  [...source.cloneNode(true).children].forEach(
    (el) => source.append(el)
  );
});
*,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.row {
  /* setting a column-count property causes the browser
     to use a multi-column layout for the element, and
     the child elements of that element will be placed
     into the appropriate columns (though some fine-
     tuning may be required): */
  column-count: 4;
  /* sets a 1em gap between adjacent columns: */
  column-gap: 1em;
  counter-reset: columnCount;
}

.column {
  padding: 15px;
  height: 300px;
  counter-increment: columnCount;
}

h2::after {
  content: ' ' counter(columnCount);
}
<button>Add more content to the row</button>
<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column</h2>
    <p>Some text..</p>
  </div>
</div>

References:

Bibliography:

Upvotes: 2

Related Questions