The CSS will dynamically adjust the width of the DIVs based on the browser size, allowing for more DIVs per

I am currently designing a layout to showcase content blocks side by side in a manner that fills the browser window with DIV blocks.

I recall stumbling upon a CSS-only technique that automatically adjusts the width of each DIV based on the size of the browser window. When there is enough space available, 3 DIVs are displayed per row; however, if the window is narrowed, it switches to 2 DIVs per row, shifting the third down while maintaining an optimal width to fill the window.

I have been attempting to replicate this functionality myself.

Let's say I require a minimum width of 500px. If there is a window width of 1000px, it would show 2 blocks per row. With 1500px, it would display 3 blocks per row, and so forth. The challenge lies in ensuring that the width of each block dynamically adjusts to accurately occupy the available space within the browser window.

I distinctly remember observing this effect functioning without Javascript enabled, leading me to believe that the solution lies within CSS.

htmlcsslistlayout

Answer №1

Implementing media queries is the solution.

/* To arrange 3 items per row for browser widths of 1024px or more */
@media (min-width: 1024px) {
    .items {
        width: 33.33%;    
    }
}

/* For displaying 2 items per row on browsers with width between 768px and 1023px */
@media (min-width: 768px) and (max-width: 1023px){
    .items {
        width: 50%;    
    }
}

/* Show only 1 item per row on browsers with a width of 767px or less */
@media (max-width: 767px){
    .items {
        width: 100%;    
    }
}

Answer №2

To accomplish your desired layout, consider utilizing media queries.

You can strategically define breakpoints to transition from 1 item per row to 2 items, and then from 2 items to 3, and so forth based on the window width.

Specify widths in percentages so that existing elements will adjust their size according to the available space.

For a 3-item row, set the width to 33%, for 2 items use 50%, and so on depending on your design needs.

If you encounter difficulties with line breaks, consider utilizing nth-child selectors to enforce the desired order.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing jQuery's each() function to create a seamless loop of background images in a

Struggling with looping the background image in a slick slider? Check out the code snippet below. var json = [ { "img_url": "https://via.placeholder.com/500x500?text=1" }, { "img_url": "https://via.placeholder.com/500x500?text=2" }, { "img_url": "ht ...

javascriptjquerycss

Running of code in <script> tag

At what point does the code inside script tags start executing? Does it happen in order? <html> <head> <title>Canvas tutorial</title> <script type="text/javascript"> function draw(){ var canvas = document.getElementById ...

javascripthtml

Display input field in AngularJS when radio button is selected

My JavaScript array looks like this: $scope.quantityMachines = [ { 'snippet' : 'One' }, { 'snippet' : 'Two' }, { 'snippet' : 'Three or more', 'extraField' : true }, { ' ...

javascripthtmlangularjsng-show

Eliminating "www" from the domain name leads to a separate website

I am new to this. The lack of support from mediaTemple and my current hosting provider has been frustrating, so I am turning to stackOverflow for help. My issue is that entering "www" before the domain name or leaving it out leads to different servers. ...

htmlwebdns

The code functions correctly on JSfiddle, however it is not executing properly on my website

When I tried to implement the code from this jsfiddle link: http://jsfiddle.net/mppcb/1/ on my website (), it didn't work as expected: Here is the HTML code snippet: <form id="myform" novalidate="novalidate"> <input type="text" name="fi ...

javascriptjqueryhtml

Initiate an animation in Wordpress once the entire page has finished loading

Recently, I incorporated some "raw html" elements with animations into my WordPress site. However, the issue I'm facing is that these animations kick off as soon as the page loads, without waiting for the preloader to complete and display the actual c ...

javascriptcsswordpressanimation

Using CSS to Create a Background with RGBA Color and Image

Having an issue with my CSS. I'm trying to create a scrolling background for the left section of my website. The RGBA is currently overlapping the entire page, but I only want it to overlap the background image. The same goes for the gridtile (the ov ...

htmlcss

Retrieve the rendered component color variables exclusively from the global color variable file

color_variables.css: [data-theme='default'] { --avatar_bg: #000; --avatar_text: #fff; --avatar_border: red; --button_bg: blue; --button_text: #fff; --button_border: darkblue; --modal_widget_bg: orange; --footer_bg: yellow; --foo ...

javascriptcssreactjsnpm

AJAX code fetching dynamic content without relying on file loading

When I load my program, the dynamic code does not appear on the page until I reload it again. I attempted to use the onload event in the body to load content from an XML file using AJAX, but it only works after closing and reopening the program, not dynam ...

javascripthtmlajaxservlets

Is there any way to remove the two default aspNetHidden Divs in asp.net web forms?

After creating an empty webform page in asp.net, the generated code looks like this: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Threetier.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org ...

javascriptjqueryhtmlcssasp.net

Seamlessly adaptive HTML5 video playback

Has anyone figured out how to make an HTML5 video in an absolutely positioned <video> element resize to fit the window width and height without ever getting cropped? Many solutions I've come across rely on using the <iframe> tag, which is ...

javascriptjqueryhtmlcsshtml5-video

Is Intellisense within HTML not available in SvelteKit when using TypeScript?

Having trouble with intellisense inside HTML for a simple page component. Also, renaming properties breaks the code instead of updating references. Typescript version: 4.8.4 Below is the code snippet: <script lang="ts"> import type { Bl ...

htmltypescriptjsxsveltesveltekit

Accessing JS code from HTML is not possible in React

Attempting to create a list using React, I have utilized the module found here: https://github.com/pqx/react-ui-tree I am currently testing out the sample application provided in this link: https://github.com/pqx/react-ui-tree/blob/gh-pages/example/app.js ...

javascripthtmlreactjs

The information is failing to display properly within the mat-menu

Recently, I've been working on creating a navbar that includes a submenu. Even though the navigation bar data is loading properly, I am facing some issues with the submenu functionality. As a beginner in this area, I would appreciate any help or guida ...

htmlangularangular-material

how can I use jQuery to disable clickable behavior in HTML anchor tags?

Here is the HTML code I am working with: (note -: I included j library on the top of page ) <div class="WIWC_T1"> <a href="javascript:void(0);" onClick="call_levelofcourse();popup('popUpDiv1')">Level of Course</a> </di ...

javascriptjqueryhtml

Unable to retrieve data from PHP using AJAX request

My project consists of 3 interconnected files: index.php, functions.js, and compute.php In index.php, there is a div that triggers a function in functions.js called compute(), which sends an AJAX request to perform a task in compute.php The code in index ...

javascriptphphtmlajax

Sending values to URL using the <a> tag in HTML

I currently have the selected language stored in a variable (var lan= urlParam('language')). I am trying to pass this language as a parameter (without PHP) in a URL within an "a" tag, like so: <a href="http://hotelscombined.sitewish.gr/HotelN ...

javascripthtml

jQuery plugin stops functioning properly following the use of the jQuery display block method

In my project, I am exploring the use of divs as tabs with jQuery. Within these divs, I also want to incorporate another jQuery plugin. Currently, I have manually created these div tabs using jQuery and set the default style for second and subsequent divs ...

javascriptjqueryhtmlcss

Issue with Jquery function not executing on second attempt

/** Creates a table of iTunes data in HTML format **/ var appendValues = function(songArray) { songArray.each(function() { var title = $(this).find("im\\:name").eq(0).text(); var songImage = $(this).find("im\\:image").eq(0).text(); var ...

javascriptjqueryhtmlajaxweb

CSS3 Animation: Facing issue with forwards fill behavior in Safari when using position and display properties

After creating a CSS3 animation to fade out an element by adjusting its opacity from 1 to 0 and changing the position to absolute and display to none in the last frames, I encountered an issue. In Safari, only the opacity is maintained while the position a ...

javascriptjquerycsscss-animations