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

Is there a way to retrieve data from two tables by linking the foreign key in one table to the primary key in another table?

I'm currently working on a menu item and have run into an issue with the information being displayed for the second level submenu (letters). Despite trying various join methods, I am unable to get the correct data - it either pulls only one of my subm ...

phpmysqlhtml

Having trouble getting the same styles to show up on .class::before and .class::after elements, even though I've applied them. The changes aren't reflecting on the live server

Currently, I am working on a project that involves an ordered list (ol), and I am trying to add pseudo elements (::before,::after) to enhance its appearance. Strangely, when I write ::before and ::after separately, the styles are applied and visible on the ...

htmlcss

Creating a Circular Design with Text at the Center Using CSS

I'm facing a challenge with this The alignment of the icon is off. I would like to adjust it slightly upwards for better presentation. Below is my HTML (angular): // Icon component <div> <i><ng-content></ng-content>< ...

htmlcssangular

Using Javascript to dynamically flash-highlight text on a webpage when it first loads

I am looking to create a special highlight effect that activates when the page loads on specific text. Let's focus on the element with id="highlight me". The highlight should glow twice around the selected container before fading out. For a clear unde ...

javascripthtmlanimation

Combining an Image with a CanvasJS Graph and Generating a Downloadable Image of the Composite

I am attempting to combine an image (a background image for my graph) with my canvasJS chart. Once these elements have been merged on a canvas, I aim to obtain a DataURL of this canvas, enabling me to download an image of it (depicting the graph along wit ...

javascriptjqueryhtmlimagecanvas

Why is this element occupying an excessive amount of space horizontally?

I've been diligently working on a unique custom WordPress theme as part of a school project. Our task is to redesign the homepage of an association, in my case, a theater group. One of the challenges I encountered was customizing the WordPress menu t ...

htmlcsswordpresswidth

A guide to placing tooltips dynamically in highcharts column charts

I am encountering an issue with tooltips in Highcharts column charts. The problem arises when the series fill up my chart, causing the tooltip to be hidden below the series and cut off by the end of the div. You can see an example here: https://i.stack.i ...

javascriptcssangularjshighcharts

Crop images in a canvas using a customized rectangle with the help of JQuery

I am trying to crop an image inside a Canvas element using a selection rectangle. My project utilizes jQuery and I am in search of a plugin that can help me implement this custom selection rectangle on the canvas itself, not just on images. Are there any ...

javascriptjqueryhtmljquery-pluginshtml5-canvas

When the screen size decreases, display the title on two lines

Currently, I am in the process of developing a react web application with the assistance of redux. My main objective is to ensure that the page is highly responsive. At this point, there is a title positioned at the top displaying: Actions to do: Past due ...

htmlcssreactjs

Arrange the icons in multiple rows to ensure an equal distribution of icons on each row

There are 12 image icons displayed in a row within div elements using display: inline-block. However, when the browser window is resized, I would like the icons to be arranged on two or more rows so that each row contains an equal number of icons. ...

jquerycssresponsive-design

CSS that relies on the presence of a specific class

I'm a CSS novice and I have encountered a scenario where I need to apply a CSS class only when another class is not present. <div class="border-solid p-2 bg-white mt-1 h-fit" [ngClass]="SOME_CONDITION ? 'tile-con ...

cssangulartailwind-css

The CSS in Django seems to be malfunctioning on various pages, particularly on header elements

My CSS file is linked in 'main/static/css/style.css' and my pages are located in 'main/templates/main/pages.html'. However, the CSS does not seem to be working properly for some pages; for example, the h2 tag is not taking on the specif ...

pythonhtmlcssdjango

Increase the padding on the left side of a background image

UPDATE: Solution discovered at this link thanks to Mr. Alien I am attempting to create a heading that resembles the following Title ------------------------------------------------- I have an image that I intend to use as a backdrop for it. However, I& ...

htmlcssless

Creating a list of definitions in the form of an HTML table using a multidimensional array in

Currently, I am tackling the following challenge: I must create a public static buildDefinitionList() method that produces an HTML list of definitions (using <dl>, <dt>, and <dd> tags) and then returns the resulting string. If the array c ...

javahtmlarraysmultidimensional-arraystringbuilder

Make dark mode the default setting in your Next JS application

In my Next JS application, I have implemented both isDarkMode and handleDarkMode functions. Within the Header component, there is a toggle button that allows users to switch between light and dark modes. <ThemeContainer> <label classN ...

htmlcssnode.jsreactjsnext.js

Solving the Dilemma of Ordering Table Rows by Value in JavaScript

I am currently working on a table and my goal is to display rows in an orderly manner based on the sum of their columns. Essentially, I want the rows with the highest values to be displayed first, followed by rows with second highest values, and so on. Des ...

javascripthtml

Trigger the select dropdown when a key is clicked

I am currently working on a project in react where I am utilizing the Select component from material. When I open the dropdown and press a key on my keyboard, the option starting with that key gets automatically selected. This behavior is also observed in ...

javascripthtmlreactjsmaterial-ui

implementing a vertical separator in the main navigation bar

Is there a way to insert a vertical divider after each li element on the main menu? <ul class="nav navbar-nav"> <li><a href="#"><i class="fa fa-home"></i> <span class="sr-only">(current)</span></a>< ...

htmlcss

The speed at which Laravel loads local CSS and JS resources is notably sluggish

Experiencing slow loading times for local resources in my Laravel project has been a major issue. The files are unusually small and the cdn is much faster in comparison. Is there a way to resolve this problem? https://i.stack.imgur.com/y5gWF.jpg ...

javascriptcssperformancelaravel-5assets

How can I prevent my mouse click from being overridden by my mouse hover?

Currently, I am developing a Sudoku game using JavaScript and facing some challenges with mouse events. My goal is to enable users to hover over a square and have it change color, as well as click on a square to highlight the entire row, column, and quadra ...

javascripthtml