Styling with CSS to ensure divs are displayed in two rows

Check out this example I found: https://jsfiddle.net/n3qs0wke/

.wrapper {
    max-width: 600px;
    border: 1px solid #333;
}
.big-div {
    min-width: 212px;
    min-height: 212px;
    max-width: 212px;
    max-height: 212px;
    display: inline-flex;
    background-color: #778;
    margin: 4px;
}
.small-div {
    min-width: 100px;
    min-height: 100px;
    max-width: 100px;
    max-height: 100px;
    display: inline-flex;
    background-color: #787;
    margin: 4px;
}
<div class="wrapper">
    <div class="big-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
</div>

I'm trying to figure out how to make the .small-div elements fill 2 rows next to the .big-div, and only move under the .big-div once two rows are full. It's sort of like giving rowspan="2" to .big-div

I have a feeling this question might have been answered on SO, but CSS terminology is not my strong suit so I wasn't sure what exactly to search for.

Thank you in advance!

htmlcss

Answer №1

After setting .wrapper to have a display of grid with 5 columns, I included the following CSS for the big-div:

/* NEWLY ADDED */
grid-column: 1 / span 2;
grid-row: 1 / span 2;

DEMONSTRATION

.wrapper {
  max-width: 600px;
  border: 1px solid #333;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
}
.big-div {
  min-width: 212px;
  min-height: 212px;
  max-width: 212px;
  max-height: 212px;
  /*display: inline-flex;*/
  background-color: #778;
  margin: 4px;
  /* NEWLY ADDED */
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
    
}
.small-div {
  min-width: 100px;
  min-height: 100px;
  max-width: 100px;
  max-height: 100px;
  /*display: inline-flex;*/
  background-color: #787;
  margin: 4px;
}
<div class="wrapper">
    <div class="big-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <!-- MORE DIVS ADDED HERE -->
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
</div>

Answer №2

UPDATE: I initially understood "fill two rows" to mean "be two rows tall". However, I now realize you may have meant "be distributed over two rows."

If that's your intention, then please use this link instead of the one below: https://jsfiddle.net/Lkjdmvfg/1/

.wrapper {
    max-width: 600px;
    border: 1px solid #333;
    display: grid;
    grid-template-columns: repeat(5, 100px);
    grid-auto-rows: 100px;
    gap: 8px;
}
.big-div {
    background-color: #778;
    grid-column-start: span 2;
    grid-row-start: span 2;
}
.small-div {
    background-color: #787;
}
<div class="wrapper">
    <div class="big-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
</div>

The difference here is that instead of setting the entire first row to be double in height, each row maintains the same height (100px) with only the big div spanning two rows.

This adjustment achieves the desired effect. Note that I replaced margins with `gap` on the wrapper and removed `inline-flex` along with hardcoded sizes, transferring them to the grid template. For more flexibility, consider replacing 200px with 2fr and 100px with 1fr to make the sizes proportional rather than fixed.

https://jsfiddle.net/Lkjdmvfg/

.wrapper {
    max-width: 600px;
    border: 1px solid #333;
    display: grid;
    grid-template-columns: repeat(5, 100px);
    grid-template-rows: 200px 100px;
    gap: 8px;
}
.big-div {
    background-color: #778;
    grid-column-start: span 2;
}
.small-div {
    background-color: #787;
}
<div class="wrapper">
    <div class="big-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
</div>

Answer №3

Simply adding float: left was all that was needed. The issue arose when I initially attempted it, and it didn't work because the parent <div> had display: flex, which disregards float properties. Below is a working example:

.wrapper {
    max-width: 600px;
}
.big-div {
    min-width: 212px;
    min-height: 212px;
    max-width: 212px;
    max-height: 212px;
    display: inline-flex;
    background-color: #778;
    margin: 6px;
    float: left;
}
.small-div {
    min-width: 100px;
    min-height: 100px;
    max-width: 100px;
    max-height: 100px;
    display: inline-flex;
    background-color: #787;
    margin: 6px;
    float: left;
}
<div class="wrapper">
    <div class="big-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
    <div class="small-div"></div>
</div>

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

AJAX Username verification failing to validate

Working with PHP and MySQL, I created a basic form which includes a textfield for the username and a submit button. The page is named checkusername.php. Additionally, I implemented an AJAX function for handling this process. Subsequently, there is another ...

javascriptphpmysqlajaxhtml

Centered flex item with a flexbox grid underneath

Looking to create a layout with an intro section on the left side and a sidebar on the right within a container. Below the intro section, I want four divs evenly spaced like a grid. But I'm struggling with setting up this grid, possibly due to flexbo ...

htmlcssflexbox

Is there a way to retrieve the sub-child menu data from a JSON file?

I am currently working on creating a horizontal menu from a json file. However, I am facing issues in retrieving the subchild elements properly. Below is an example of my json file: var data = [{ "menu":[ { "MenuId":1, ...

javascriptjquerycssjsonmenu

What is the reason for the continual appearance of the *ngIf validation message?

Currently, I am working with Angular and HTML. I have implemented pattern validation for the first name field, which should not accept only numbers. <fieldset class="six"> <input id="firstName" ng-pattern="^[a-zA-Z]+$" type="text" ...

htmlcssangular

Implement Infinite Scrolling Pagination in WordPress

I'm completely new to Wordpress and currently utilizing the FoundationPress theme. My goal is to include a button that users can click on to load more posts. Essentially, I want users to see four blog posts initially and then be able to load the next ...

phphtmlajaxwordpress

execute the code when the device is not an iPad

if ( (navigator.userAgent.indexOf('/iPadi') != -1) ) { } This conditional statement is used to identify whether the user's device is an iPad, but I specifically want to execute the code only if it is not an iPad. I have a JQuery hover func ...

jqueryhtmlipaduser-agent

IE rendering issue: jQuery image slideshow captions lack transparency

I recently created a slideshow using jQuery that features fading images with corresponding captions in individual divs. While the captions are meant to have a transparent appearance, I have encountered an issue specifically in Internet Explorer where this ...

jquerycssinternet-explorerslideshowopacity

Retrieve the row index in PHP after loading data onto a web page

I have been utilizing PHP to retrieve data from a MySQL database and showcase it within a DIV on a webpage. The information I am retrieving pertains to a list of tasks, and I would like users to have the ability to delete a task once it has been completed. ...

phphtmlmysqlrowid

Trouble displaying CSS content image in Internet Explorer

Usually, I use Chrome as my default browser. However, I recently decided to test whether my website functions properly on other browsers as well. In Chrome, the header displays my logo with great quality using content:url. But when I tried accessing my w ...

cssinternet-explorergoogle-chrome

What is the best way to utilize *ngFor for looping in Angular 6 in order to display three images simultaneously?

I have successfully added 3 images on a single slide. How can I implement *ngFor to dynamically load data? <carousel> <slide> <img src="../../assets/wts1.png" alt="first slide" style="display: inline-blo ...

angularhtmlcssangular-materialcarousel

Prevent the display of hyperlinks in the status bar when hovering over a hyperlink or button

The application I'm working on has a default status bar at the bottom of each screen that displays URLs linked to buttons and icons. For example: https://i.stack.imgur.com/ZFTsp.jpg I am trying to prevent the display of URLs associated with hyperlin ...

javascriptjqueryhtmlhyperlinkstatusbar

Access to PHP script (IF) unattainable following a POST occurrence

I'm completely new at this. I am attempting to create a contact form using HTML5 and PHP mail function, but I am facing an issue with my form action pointing to contacto.php. After submitting the form, it seems to be skipping over the IF condition wi ...

javascriptphphtmlif-statement

Experimenting with animating an element through onClick event using JavaScript

I would like to create an animated div using JavaScript that activates on click. <div class="Designs"> <p>Designs</p> <div class="Thumbnails" data-animation="animated pulse"> <a href=" ...

javascriptjqueryhtmlcssajax

arrange a div inside another div

I'm struggling to grasp the concept of how divs function in HTML. Below is a snippet of my HTML code: <div id="user_p"> <img src="img/pp/djbaptou.jpg"> <div class="followings"> djbaptou </br> Baptiste Arnaud </br> ...

htmlcss

Images are appearing misaligned in certain sections

I have been utilizing the freewall jQuery plugin for organizing images in my website. While the layout of my first section, located at , is functioning properly, I am encountering some issues with its height. The code snippet that I am currently using is a ...

jquerycss

Choose a selection from the options provided

This is a sample for demonstration purposes. I am trying to display an alert with the message "HI" when I click on Reports using the id main_menu_reports. My attempted solution is shown below. <ul class="nav" id='main_root_menu'> & ...

javascriptjqueryhtml

The element is not defined in the Document Object Model

There are two global properties defined as: htmlContentElement htmlContentContainer These are set in the ngAfterViewInit() method: ngAfterViewInit() { this.htmlContentElement = document.getElementById("messageContent"); this.htmlContentCont ...

javascripthtmlangulartypescript

Positioning the HTML form in the middle of the page

The given HTML code generates a form within a table, but despite aligning the table to the center, it remains on the left side of the webpage. <!DOCTYPE html> <html> <head> <style>input.textfill { float: right; }&l ...

htmlcssalignmentcentercss-tables

How can I ensure that my navbar-right remains fixed to the right side of the screen and is always visible at the top of the page as I

When the page first loads: After scrolling down: I am attempting to create a fixed navigation bar at the top of the screen, so that it remains visible as the user scrolls down the page. However, I am facing an issue where my navbar brand is positioned to ...

htmlcssbootstrap-4navbar

Ensure that a group of checkboxes is mandatory

I currently have a series of checkboxes set up like so: <label>What is your preferred movie genre?</label> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="genre1" name="genre" ...

javascripthtml