How can I display different sections of an article in different equaly sized columns?-CodePudding

Im trying to create my first webpage and this is getting complicated for me.
Im trying to display this in 3 different and equaly sized columns but the closest I've been able to implement this was this:

article {
  display: flex;
}

<article>

  <section id="sec1">
    <p> info </p>
  </section>

  <section id="sec2">
    <p> info </p>
  </section>

  <section id="sec3">
    <p> info </p>
  </section>

</article>

This form adequately distributes the information in the 3 columns, but they do not occupy the same space. I appreciate any kind of help or recommendation, thanks.

CodePudding user response：

You need to set your flex items.

section{flex-grow:1}

For all flex related stuff, this is a resource worth reading: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CodePudding user response：

I personally would solve this with grid which is a little easier to style. You simply add article { display: grid; grid-template-columns: repeat(3, 1fr); }.
That will create 3 equally sized columns.

Then you could add grid-gap to add a spacing to seperate the columns without actually having to calculate anything yourself.

article {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

/* for styling purpose only */
section {
  border: 1px solid red;
  padding: 5px;
}

<article>

  <section id="sec1">
    <p> info </p>
  </section>

  <section id="sec2">
    <p> info </p>
  </section>

  <section id="sec3">
    <p> info </p>
  </section>

</article>

If you want to use flexbox then you can also use the gap-property. However the important part is, that you need to define the width of the section. Either use width: 33.33%; which however can give you a pixel inaccuracy on larger screen. Better would be to use width: calc(100% / 3);

article {
  display: flex;
  gap: 10px;
}

article > section {
  width: calc(100% /3);
}

/* for styling purpose only */
section {
  border: 1px solid red;
  padding: 5px;
}

<article>

  <section id="sec1">
    <p> info </p>
  </section>

  <section id="sec2">
    <p> info </p>
  </section>

  <section id="sec3">
    <p> info </p>
  </section>

</article>

CodePudding user response：

You should set sections with flex-grow: 1 to occupy the whole space and flex-basis: 0 to equally set the widths of the columns. See the example:

Suppose you have 3 columns with unequal content:

article {
  display: flex;
}

article section {
  flex-grow: 1;
  flex-basis: 0;
}

#sec1 {
  background: red;
}

#sec2 {
  background: yellow;
}

#sec3 {
  background: green;
}

<article>

  <section id="sec1">
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur perferendis veritatis dolore natus debitis </p>
  </section>

  <section id="sec2">
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur perferendis veritatis dolore natus debitis, iusto aliquid necessitatibus sint. </p>
  </section>

  <section id="sec3">
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur perferendis veritatis dolore natus debitis, iusto aliquid necessitatibus sint. Impedit aliquid, fugit consequatur hic, praesentium ab! Provident qui, laudantium suscipit. </p>
  </section>

</article>