Utilize the display property with grid to effortlessly expand a block to occupy the entire width

I am currently exploring the grid system and I have a specific challenge. I would like the third block to expand to its full width without the need for extra classes.

Can this be achieved using only internal CSS?

.grid {
  margin: 36px auto;
  height: 120px;
  width: 100%;
  display: grid;
  grid-gap: 8px;
  
  & > * {
    border: dotted 2px black;
  }
}
.first {
  background-color: #6CD4FF;
  grid-row: 1;
}
.second {
  background-color: #8B8DF9;
  grid-row: 1;
}
.third {
  background-color: #DDFD77;
  grid-row: 2;
}
<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>
<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
</div>
<div class="grid">
  <div class="first"></div>
  <div class="third"></div>
</div>

My end goal is to achieve something similar to what you can see in this example image.

csscss-grid

Answer №1

One option is to utilize the Adjacent Sibling Combinator, eliminating the need for media queries and only relying on CSS Grid properties.

.second + .third {
  grid-column: 1 / span 2;
}

Alternatively:

// A more generalized approach
div + .third {
  grid-column: 1 / span 2;
}


.grid {
  margin: 36px auto;
  height: 120px;
  width: 100%;
  display: grid;
  grid-gap: 8px;
  
  & > * {
    border: dotted 2px black;
  }
}
.first {
  background-color: #6CD4FF;
  grid-row: 1;
}
.second {
  background-color: #8B8DF9;
  grid-row: 1;
}
.third {
  background-color: #DDFD77;
  grid-row: 2;
}
.second + .third {
  grid-column: 1 / span 2;
}
<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>
<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
</div>
<div class="grid">
  <div class="first"></div>
  <div class="third"></div>
</div>

Answer №2

For those seeking a more versatile approach, the following code snippet demonstrates the use of nth-child() selectors:


<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>
<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
</div>
<div class="grid">
  <div class="first"></div>
  <div class="third"></div>
</div>

Answer №3

Check out this code snippet, it may be useful to you.

.grid {
  margin: 36px auto;
  height: 120px;
  width: 100%;
  display: grid;
  grid-gap: 8px;
  
  & > * {
    border: dotted 2px black;
  }
}
.first {
  background-color: #6CD4FF;
  grid-row: 1;
}
.second {
  background-color: #8B8DF9;
  grid-row: 1;
}
.third {
  background-color: #DDFD77;
  grid-row: 1;
}
<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
</div>
<div class="grid">
  <div class="third"></div>
</div>

<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
</div>

<div class="grid">
  <div class="first"></div>
  </div>
  <div class="grid">
  <div class="third"></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

What is the best way to modify the CSS of a child element within the context of "$(this)"

On my search results page, each result has an icon to add it to a group. The groups are listed in a hidden UL element on the page with display:none. The issue I'm facing is that when I click on the icon for one result, the UL appears under every sing ...

javascriptjquerycssthischildren

Strange behaviors when using setinterval with classes

Currently working on enhancing a slider functionality, and I have observed that everything is functioning smoothly - function Slider(element) { this.i = 0; this.element = element; var self = this; this.timer = window.setInterval(functi ...

javascriptjquerycssoopvelocity.js

Managing Custom CSS Files in Sencha Touch 2 Production Build

Currently, I am in the process of working on a mobile website using Sencha Touch 2. To develop the production build, I utilized Sencha Cmd v3. Upon testing the production version, I noticed that although my custom CSS files are present in the folder struct ...

htmlcssextjssencha-touchsencha-touch-2

Allow the div to break out of the overflow: hidden property without disrupting the overall page layout

Currently, I am attempting to separate a child element from its parent that has overflow: hidden applied. The main reason for restricting the dimensions of the parent is for a JavaScript workaround. I have experimented with positioning the child element, ...

htmlcss

What is the best way to resize an image in HTML based on a percentage of its height?

Within my HTML code, I have a PNG image that has been adjusted in size using CSS: .adjust-image { border:1px solid #021a40; display: block; width: auto; max-width: 100%; max-height: 1000px; } .img-container { position: relative; } ...

htmlcssimage

Show on smartphones, conceal on desktops - Activation/URL

I'm attempting to create a click-to-call link on my website using the following: <a class="mobile-only" href="tel:+534306464456"><p class="">Click Here to call us</p></a> I want this link to only show up on mobile devices, sp ...

htmlcss

Adjust the navigation bar for smaller screens

I am diving into my first project using Bootstrap and am currently in the process of setting up the navbar. My goal: When the XS model is activated, I want to adjust the font size of the header, modify the height of the navbar, and left-align the header. ...

htmlcsstwitter-bootstrapresponsive-designnav

Is there a way to adjust the size of the canvas element in HTML without compromising quality or resorting to zooming?

I'm currently working on a basic modeling application for the web. The main component of my app is a canvas element that I'm trying to size correctly. However, when I set the height and width using CSS, it scales the entire canvas and compromises ...

javascripthtmljquerycsscanvas

While reviewing my HTML code, I couldn't locate a particular line of code responsible for changing the display of my webpage. However, upon inspecting the element, I discovered that

<h2><a class="label label-info" target="_blank" href="http://www.avis.com.pk/"> Avis</h2> </a> <h4> <span class="label label-primary"> Rent A Car Service</span></h4> There is an Inspect Element image attach ...

htmlcss

Personalized sorting to match the unique rendering of cells in Material UI Data Grid

I have integrated the Material UI V4 Data Grid component into my React Js application. The Data Grid component requires two props: rows (list type) and columns (list type). Below is a sample row item: const rows = [ { id: 1, customerName: " ...

javascriptcssreactjsmaterial-ui

Ways to streamline repetitive CSS rules within media queries

As I work on defining multiple media queries, I realize there is some redundant code within them: @media only screen and (max-width:768px), only screen and (min-width:769px) and (max-width:1040px) { .list__figure { margin-right: 20px; ...

cssmedia-queries

The horizontal scrolling feature will not activate

I meticulously followed the instructions in a YouTube tutorial to implement this code. What's puzzling is that while the code works perfectly for the person in the video, allowing the grid items to scroll to the right, it doesn't have the same ef ...

htmlcssflexbox

Bizarre display of miscellaneous items on the monitor

Hey there, I've been working on creating a div to display information about both the Civilian and Vehicle that users input. Initially, everything worked perfectly with my HTML and CSS until I introduced two additional divs into the layout. With just o ...

htmlcss

The video on my site is refusing to play

I'm having an issue with a 2-second video that is not playing, yet when I tried a 10-second video it worked perfectly. Why is this happening? Could it be that HTML does not support videos that are shorter than 1-2 seconds? It seems like it's onl ...

htmlcssvideoattributes

Having trouble extending my navbar to the full height of the window

Having an issue with my code regarding the menu. I am trying to create a navbar that fills the height on the left side for PC screens and becomes scrollable at the top for mobile versions. The problem lies in my flex container not properly filling the scr ...

htmlcssflexbox

Inserting multiple rows of data into a MySQL database in a single page using only one query in PHP

This snippet shows a MySQL query being used to update and insert data into a database: if ($_POST["ok"] == "OK") { $updateSQL = sprintf("UPDATE attend SET at_status=%s, at_remarks=%s WHERE at_tt_idx=%s", GetSQLValueString ...

javascriptphpjquerymysqlcss

Combining photos seamlessly and bringing them to life through animation upon window loading

My main goal is to seamlessly fit the images together, but I'm struggling to achieve this. I tried using masonry, but unfortunately it didn't work for me. All I want is to tightly pack the divs together. For instance, in my fiddle example, I woul ...

javascriptjqueryhtmlcss

Firefoxy can't seem to get through the navigation keys within an element that has a hidden

Check out this fiddle I created: http://jsfiddle.net/c11khcak/13/. My goal is to hide the scrollbar of an element while still allowing it to be scrollable using the mouse wheel and up/down navigation keys. I've been able to achieve this using some bas ...

htmlcssfirefoxscroll

The slider components have an endless loop feature that only runs once before coming to a

I'm working on creating an infinite slider that loops continuously without the need for navigation buttons. Instead, I plan to allow users to control the slider using touch gestures (although this functionality is not yet implemented in the code snipp ...

javascripthtmlcsssass

The process of altering the color of a table row in JavaScript can be done after dismissing a pop-up that was triggered by a button within the same row

I am tasked with changing the color of a specific table row based on user interaction. The table consists of multiple rows, each containing a button or image. When the user clicks on one of these buttons or images, a popup appears. Upon successful data sub ...

javascripthtmlcss