Best HTML setup?

HTML & CSS
1

example
example899×323 3.19 KB

I’m trying to figure out the best wayo tackle this scenario. I have to make 240x240 boxes (20px margin between all boxes, so I was going to do margin: 10px; on all the items). I have to have enough to blanket the entire browser width. I’m trying to figure out the best way to structure this HTML.

My first thought is to have a container with 4 boxes per container. Flex / justify content space-between for each container, and each container can have a Sass function to make it X amount wider (~500px) per each consecutive container. There are only 8 boxes in this example, but depending on the screen width, I will need a handful of containers probably (so at least 20 boxes probably. Not surehow I’ll make it dynamic enough to fit every screen width, but that’s irrelevant for now.

Basically, I would like it if others can help me brainstorm of a good solution for this :slight_smile: . I actually have to do a moses sea parting trick (split down the middle) to make room for a dynamic thing which will pop into view when you see the boxes, but that’s just a side point :slight_smile: .

1 Like
2

My first thought was to check grids…

3

Inline-block divs? Fluid and responsive without trying.

4

The order is important though :frowning: .

5
6

Right, but in his context of inline-blocks, the order property cannot be used :slight_smile: .

1 Like
7

You do know this can invalidate all the replies?

8

It doesn’t invalidate my idea in post 1, and other users just need to keep that in mind when brainstorming :slight_smile: .

I ended up taking every 4 boxes, wrapping them in a container and setting up the boxes as floats.

&:nth-child(2n + 1) {
          float: left;
        }
        &:nth-child(2n + 2),
        &:nth-child(4n + 4) {
          float: right;
        }
        &:nth-child(4n + 3) {
          clear: both;
        }

Then the containers were set up with a sass loop: first box is 520px, second is 1040, etc etc. 520px each consecutive sibling container.
Then, to accomplish the moses sea parting trick, since I know the box that’s coming into view is a fixed width, I simply take all the numbered boxes and use a transform to move it.

Javascript to detect when it’s not fully visible.

9

Are you satisfied that this meets your needs?

10

I am! This thread can be considered solved.

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.