What is the best way to design a large grid layout using HTML5?

I am aiming to construct a 6 by x grid where the columns retain uniform size based on the width of the outer container (i.e. body). The height should be consistent within each row and adjust according to the content in each cell.

Below is my current progress: 

body {
    text-align: center;
}

.item {
    padding: 20px;
    margin-bottom: 10px;
    text-align: left;
    display: block;
    font-size: 0.75em;
}

.row {
    margin: 10px;
    display: block;
    margin-bottom: 25px;
    box-sizing: border-box;
    border: solid blue 1px;
    height: 100px;
}

.row div {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    float: left;
    height: 100%;
    width: 16.667%
}

.row a {
    text-align: center;
    margin: 5px;
    padding: 20px;
}

.row a * {
    display: block;
}

.row img {
    width: 100%;
    display: inline-block;
}
<div class="row">
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Left Side</span>
        </a>
    </div>
    <!-- Add more items here -->
</div>

http://jsfiddle.net/aj8py9gu/4/

The criteria for this layout were inspired by a similar interface created in WPF. While it was achieved with just three lines of XAML, replicating it in HTML5 has proven challenging. The row div's are given a fixed height to prevent them from collapsing to zero height and causing overlapping cells. However, I seek a solution without fixed dimensions.

While proficient in HTML/CSS/JavaScript, I welcome fresh perspectives on this issue. If possible, I prefer a CSS-based approach over JavaScript for handling size adjustments.

htmlcss

Answer №1

The issue arises when all children of an element are floated. The easiest solution is to apply `overflow:hidden;` to the `.row` class and remove the set height.

This situation is known as "clearing floats". Various methods for resolving this problem can be explored here: What methods of ‘clearfix’ can I use?

body {
    text-align: center;
}

.item {
    padding: 20px;
    margin-bottom: 10px;
    text-align: left;
    display: block;
    font-size: 0.75em;
}

.row {
    margin: 10px;
    display: block;
    margin-bottom: 25px;
    border: solid blue 1px;
    overflow:hidden;
}

.row div {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    float: left;
    height: 100%;
    width: 16.667%
}

.row a {
    text-align: center;
    margin: 5px;
    padding: 20px;
}

.row a * {
    display: block;
}

.row img {
    width: 100%;
    display: inline-block;
}
<div class="row">
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Left Side</span>
        </a>
    </div>
    <div>
        <a class="item">
            <img src="http://dummyimage.com/600x600/000/fff.jpg" />
            <span>Applied Panel - Base Right Side</span>
        </a>
    </div>
    <div>
        [additional content]

Answer №2

To implement the display:flex property, you can follow the code snippet below:

.row {
    margin: 10px;
    display: flex;
    margin-bottom: 25px;
    border: solid blue 1px;
    height: auto;
}

.row > div {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    flex: 0 0 16.667%;
    height: auto;
}

For a visual representation, refer to this updated fiddle link: http://jsfiddle.net/29skzne6/1/

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

The QR code disappears from the screen once the button is no longer pressed

After following an online tutorial on creating a QR code generator, the code works fine and I am able to display the image. However, I'm facing an issue where the image disappears from the screen once the button is released. Here is the code snippet: ...

htmlcssqr-code

What are some ways to keep the text within the boundaries of the input box?

How can I prevent the letters from extending beyond the bar when typing a lot of characters? Your assistance in resolving this issue is greatly appreciated. <div id="tasks-container"> <div id="tasks-header"> ...

javascripthtmlcss

At what point do browsers decide to round pixel fractions to whole pixels, and when do they choose not to do

I recall reading here on SO that using pixel fractions in CSS is generally advised against because browsers tend to round them to the nearest whole pixel. As shown in the example below, 0.3 pixels are indeed rounded to a full pixel: span { border: 0. ...

csspixelsubpixel

What causes the vuetify tag not to render as HTML in the browser?

I ran into a styling issue while using Vuetify in my Nuxt 2 project. Upon inspecting the element in dev tools, I noticed that some Vuetify tags were not being converted to HTML as expected (they were displayed as div class="tag_name"). These unco ...

htmlvue.jsnpmnuxt.jsvuetify.js

How about incorporating AJAX into your HTML code?

I am currently in the process of developing an email system for a company that wishes to use it for sending emails. To achieve this, I have implemented a custom HTML editor for creating email content. My goal is to post the email contents to an external PH ...

phpjquerymysqlhtmlajax

Rails: jQuery - page refreshes unexpectedly during event execution

After successfully implementing a jQuery script for my custom dropdown menu on a standalone webpage, I encountered issues when integrating it into my Rails application. I am unsure if the problem is related to Turbolinks or if there is another underlying c ...

javascriptjqueryhtmlruby-on-railsturbolinks

When scrolling down, the popup window shifts its position

I have implemented a popup window which displays a list on hover. It works perfectly on the default page, but when I scroll down, the popup also moves with the scrollbar. Below is the HTML code that creates the hidden popup list initially and shows it on ...

javascripthtmlcss

Error: Unable to access the 'version' property of null

Having trouble installing any software on my computer, I've attempted various solutions suggested here but none have been successful. $ npm install axios npm ERR! Cannot read property '**version**' of null npm ERR! A complete log of this ru ...

javascripthtmlnode.jsreactjsnpm

"Unlocking the Power of mediaElementjs: Easy Steps to Accessing the Player Instance

I'm facing a small issue with the MediaElement.js player. To access the player instance, I usually use the following code (which works in HTML5 compatible browsers): // Retrieve player this.playerId = $('div#shotlist-player video').att ...

javascriptjqueryhtmlhtml5-videomediaelement

Creating a dynamic nested list in HTML using JavaScript with data retrieved from a JSON source

I'm trying to generate a dynamic nested ul\li list from a JSON array. IMPORTANT! While I can use jQuery for this transformation, it's in a node.js environment where DOM access is restricted and I must work with a string. The depth of the a ...

javascripthtmlarraysjsonnode.js

Interactive Bootstrap 4 button embedded within a sleek card component, complete with a dynamic click event

I am trying to create a basic card using bootstrap 4 with the following HTML code. My goal is to change the style of the card when it is clicked, but not when the buttons inside the card are clicked. Currently, clicking on the test1 button triggers both ...

htmltwitter-bootstrapangulartypescript

What could be the reason for the sudden malfunction of the .tabs li:hover property on my

I'm having trouble with the :hover effect not working on my .tabs li element. I've tried commenting out my jQuery script, but it still won't apply. Can anyone help me figure out why? Here's a JSFiddle link for reference: https://jsfidd ...

htmlcsshover

WordPress CSS & JS files failing to enqueue properly

My attempt to integrate my CSS and JS files with WordPress has not been successful. Although my CSS works through the Custom CSS tab, this is not an ideal solution. Below is the code from my functions.php file for your reference. Can you help me troublesho ...

javascriptcsswordpress

When an image is loaded, use Jquery to automatically open a new tab, instead of

I need to implement a function where, on loading an image on a page, a new tab opens and starts downloading a file from a specific URL while keeping the original page open. This task is part of a WordPress site with a jQuery section in the backend. I' ...

javascriptjqueryhtmlwordpress

Dual-Language Dublin Core Metadata for Document Description

If I want to express the document title in two languages using Dublin Core, how can I do it? Based on my research, I could do the following: <meta name="dc.language" content="en"> <meta name="dc.language" content="fr"> <meta name="dc.title ...

htmldublin-core

Tips for resolving the issue of "Unable to assign property '_DT_CellIndex' to undefined in Jquery Datatable"

<?php if(mysqli_num_rows($result)>0) {?> <table class="table table-striped" id="example" align="center"> <tr> <thead> <th style=&quo ...

javascriptphphtmljquerydatatable

In Chrome, there is a conflict between the screen width when using `position: absolute` and `position: fixed` if there is vertical

I'm in the process of developing a website with a video banner set to fixed positioning in the background, and a div that has absolute positioning covering part of the video on the bottom half. However, I've encountered an issue - when I add this ...

javascripthtmlcssgoogle-chromecss-position

Set the default value for a form control in a select dropdown using Angular

I've been struggling to figure out how to mark an option as selected in my select element, but I haven't had any luck. I've tried multiple solutions from the internet, but none of them seem to be working for me. Does anyone out there have ...

htmlangulartypescript

Is it possible to delete a <div> tag based on screen size using jQuery or JavaScript?

Hello, I was curious if it's possible to dynamically remove a specific div tag using jQuery or JavaScript when the screen reaches a certain size, for example 500px. ...

javascriptjqueryhtml

Emails are not responsive to media queries

I've experimented with multiple media queries in an attempt to make this work on both iPhone (landscape/portrait) and desktop, but I'm struggling to achieve the desired outcome on both simultaneously. While some of my classes are functioning cor ...

cssresponsive-designmedia-queries