Dynamic, adaptable, and expandable tiles that effortlessly span the full width of the screen

Question

Dynamic, adaptable, and expandable tiles that effortlessly span the full width of the screen

Trying to design fluid and flexible "tiles" for a website, which should expand across 100% of the browser viewport. The goal is for them to adjust in size if necessary to fill any white space gaps left by unfitted tiles.

Using a standard div tag with a min-width and min-height of 200px, set to "display: inline-block," solves most of the issue. As the browser window widens, the tiles will stack up on the top line if there's room for another.

The challenge arises when there's no space for the next tile, resulting in whitespace on the right side. In such cases, I want each tile to 'scale up' to occupy the full width of the line.

For example, if the browser width is 675px, instead of having three 200px-wide tiles, they would resize to 225px each. If you then resize the browser to 800px, there would be four 200px-wide tiles.

I aim to replicate the layout displayed on . Consequently, I'm seeking a CSS-only solution, although I suspect utilizing some JavaScript may be necessary, particularly for handling window resizing. Any suggestions?

html css scale fluid-layout

Answer 1

Answer №1

To achieve a pure CSS solution, you can utilize media queries in conjunction with percentage-based widths:

.tile {
    /* Display 4 tiles per row */
    width: 25%;
}

@media (max-width: 500px) {
    .tile {
        /* Adjust to display 3 tiles per row */
        width: 33.33333333332%
    }
}

@media (max-width: 300px) {
    .tile {
        /* Change to show 2 tiles per row */
        width: 50%
    }
}

Check out this fiddle for a visual representation of the CSS approach: http://jsfiddle.net/bDBMP/1/

Answer 2

To achieve a pure CSS solution, you can utilize media queries in conjunction with percentage-based widths:

.tile {
    /* Display 4 tiles per row */
    width: 25%;
}

@media (max-width: 500px) {
    .tile {
        /* Adjust to display 3 tiles per row */
        width: 33.33333333332%
    }
}

@media (max-width: 300px) {
    .tile {
        /* Change to show 2 tiles per row */
        width: 50%
    }
}

Check out this fiddle for a visual representation of the CSS approach: http://jsfiddle.net/bDBMP/1/

Dynamic, adaptable, and expandable tiles that effortlessly span the full width of the screen

Answer №1

Similar questions

Is it possible to have a variable number of dynamic CSS Grid columns with the option of including a header or footer

Enhancing Tapestry Grid component column sort icons

Enhance navigation in your HTML5 iPad app with a swipe effect for seamlessly transitioning to the next page

Limiting the scrolling capability within a flex container by using the nowrap

Differentiate input elements with custom styling

What is the best way to show a background color on a heading?

Creating a table with a fixed width that matches the dimensions of a textarea

One way to change the cursor CSS property is by dynamically altering it based on scrolling behavior. This involves modifying the cursor property when scrolling

What is the process for combining AngularJS filters?

Creating PDF files with PDFkit in Node.js while rendering HTML data

Step by Step Guide to Creating Vote Tallying Buttons with XHTML

Is your browser displaying dimensions different from the ones specified in the CSS?

Bootstrap 5 alert: The function `$(...).carousel` is not recognized

CSS Code That Is Ineffective

Despite adding a content security policy within the meta tag of my HTML, the policy does not seem to be properly enforced

It displays the PHP code as a comment rather than executing it

Using a border-radius on Internet Explorer 11 reveals the background through the corners

Obtain the script's event feedback from the WebView and transfer it to React Native

What are some creative ways to design nested flexboxes?

Troubleshooting a JavaScript function's ineffectiveness when triggered by clicking an