Search code examples
htmlcsswordpressflexboxcss-multicolumn-layout

How can I create a gallery of equal sized HTML cells in WordPress with column-count CSS?

I tried Bootstrap first. It was supposed to be so easy for beginners, but I couldn't get it to work in WordPress for some reason.

Next I considered FlexBox, but after some research, it seemed there was an even easier solution called "column-count". According to this CSS Tricks post, "You can declare columns on any block level (sic.) element. Columns can be applied to a single element or applied to multiple elements by targeting their parent.":

https://css-tricks.com/guide-responsive-friendly-css-columns/

So, on my WordPress webpage, since semantically I have a list, I created a list of of outer div containers with internal elements. Here is the page in question:

https://erichepperle.com/freedom/

Here is a screenshot of the section of my website that is not acting properly.

enter image description here

My CSS:

And here is the applicable CSS code:

.ehw-freedom-signpost .ehw-channel-columns {
    column-count: 6;
    column-width: 175px;
    display: inline-block;
}

I declared a column-count of 6, but as you can clearly see, it only seems to be creating 4 columns. I tried changing the column count to 3, and then to 7 as a troubleshooting step. It still remained at 4. Very strange.

Desired Output:

This is roughly the orientation of how this section of the page should display:

[ITEM1] [ITEM2] [ITEM3] [ITEM4] [ITEM5] [ITEM6]

[ITEM7] [ITEM8] [ITEM9] ... etc

But, this is what is actually what seems to be displaying:

[ITEM1] [ITEM3] [ITEM5] [ITEM7]

[ITEM2] [ITEM4] [ITEM6]

NOTE: WordPress StackExchange did not have anything like this question so I determined that CSS must be close enough to programming to go here. If I was wrong about that determination and it goes somewhere else, please let me know.

One final thought: Perhaps FlexBox would be the way to go? I don't know how to implement it tho, if that is the case.

Solution

  • I think Flex was the way to go. I just did an example on how you can structure columns using Flex.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <style>
      .box {
        display: flex;
        flex-wrap: wrap;
      }
      .box > * {
        flex: 1 1 130px;
      }
    </style>
    <div class="box">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
      <div>Six</div>
      <div>Seven</div>
      <div>Eight</div>
      <div>Nine</div>
      <div>Ten</div>
    </div>
  </body>
</html>