CODEWITHSUNDEEP
htmlcsslayoutsass
blaineh
blaineh

Reputation: 2333

How to create a variable size tile layout in html

I'm experimenting to see if I can created a variable sized tile layout like the one below, without any intermediate wrapper divs.

Xbox 350 movies and tv home screen

I first tried a flexbox approach, and then discovered that flexbox isn't designed to have children move across rows, and then and a normal inline-block and float: left approach, but with the exact same problem. I haven't been able to get the blocks to move across different rows and into the space in between them.

I'm also looking for a no javascript approach. So without using something like Masonry.

Codepen

It's important for me to point out that I'm trying to solve this problem generally, meaning that although we could certainly find a way to create this particular layout, I'm more worried about figuring out how to create layouts of this general type, where I might not know ahead of time the exact orientation, order, or size of the tiles.

Here's the desired html (jade):

.xbox-tiles
    .tile 1 x 1
    .tile 1 x 1
    .big-tile 2 x 2
    .tile 1 x 1
    .tile 1 x 1
    .tile 1 x 1
    .tile 1 x 1
    .tile 1 x 1
    .tile 1 x 1

and sass:

@import "bourbon"

%tile
    @include flex(0)
    @include flex-basis(auto)

    // display: inline-block
    // float: left

    box-sizing: border-box


.xbox-tiles
    @include display(flex)
    @include flex-direction(column)
    @include flex-flow(wrap)

    height: 90vh
    width: 90vw

    .tile
        height: 33.33%
        width: 25%
        @extend %tile

    .big-tile
        height: 66.66%
        width: 50%
        @extend %tile

Upvotes: 2

Views: 1302

Answers (1)

Jarod Moser
Jarod Moser

Reputation: 7348

Following the comment on this question I was able to produce this codepen which uses simple floats, no flexbox needed, in other words float all the small tiles left and the big one right:

@import "bourbon"

%tile    
    box-sizing: border-box

.xbox-tiles

    height: 90vh
    width: 90vw

    .tile
        float: left
        height: 33.33%
        width: 25%
        @extend %tile

    .big-tile
        float: right
        height: 66.66%
        width: 50%
        @extend %tile


body {
  background-color: grey;
}

.xbox-tiles .tile, .xbox-tiles .big-tile {
  box-sizing: border-box;
  border: 2px solid white;
  margin: 0;
}

.xbox-tiles {
  height: 90vh;
  width: 90vw;
  background-color: cyan;
}
.xbox-tiles .tile {
  float: left;
  height: 33.33%;
  width: 25%;
}
.xbox-tiles .big-tile {
  float: right;
  height: 66.66%;
  width: 50%;
}
<div class="xbox-tiles">
  <div class="tile">1 x 1 - 1</div>
  <div class="tile">1 x 1 - 2</div>
  <div class="big-tile">2 x 2 - 3</div>
  <div class="tile">1 x 1 - 4</div>
  <div class="tile">1 x 1 - 5</div>
  <div class="tile">1 x 1 - 6</div>
  <div class="tile">1 x 1 - 7</div>
  <div class="tile">1 x 1 - 8</div>
  <div class="tile">1 x 1 - 9</div>
</div>

Upvotes: 1

Related Questions