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

Is Consistency Possible with CSS Transition Direction?

Take a look at this example: https://codepen.io/jon424/pen/XWzGNLe In the provided code snippet, there is a button that can toggle the visibility of an image. When clicked, the image disappears from bottom to top and reappears when clicked again. The use ...

javascriptcsscss-transitions

Looking for assistance with a straightforward CSS opacity fix for Internet Explorer

Take a look at this page comparison between chrome and IE. On the right side, you'll notice drop down fields. While Chrome displays them correctly, IE shows rectangular boxes instead. To fix this issue, I added opacity to the select fields with the ...

cssopacity

Ways to display a different div when clicking on a div?

Good afternoon, I've noticed that this question has been asked numerous times before, but none of the solutions provided seem to work for my specific issue. My problem involves a div with the class .title3. I want another div with the class .Content ...

javascriptjqueryhtmlcss

Adjust the size of a div while maintaining its aspect ratio based on the width and height of its parent element using CSS

After exploring various methods to create div aspect ratios using CSS, I had success with a demo. However, I encountered an issue with setting the height of my container when the width-to-height ratio is larger (#1 scenario). I was able to achieve the #2 ...

css

What is the best way to ensure the header expands to fill the entire width when zooming out?

When I try to zoom out, the header does not extend to the full width of the page. I have included two images for reference - the first image shows how it should look when zooming out, while the second one depicts the issue where the header does not occupy ...

htmlcsszooming

Having trouble interacting with buttons while an overlay is open

When I try to use the overlay to move the text upwards and reveal buttons, I encounter an issue where I am unable to hover or click on those buttons. As soon as I try to interact with the buttons, the overlay and text come down, blocking my access. I have ...

htmlcssreactjsstylingcss-transforms

React and Mui are experiencing a peculiar issue where a background is mysteriously missing from a component in a specific location

Exploring React 16 and functional components with hooks Discussing Mui 4 framework Adding a background pattern to multiple login pages seems simple, right? Here is an example of a login page component: return ( <Box width={1} height={1}> ...

cssreactjsmaterial-uibackground

Move the element from the center of the screen back to its starting position

Looking to craft a single animation that will transition elements from the center of the current view back to their original positions. Unfortunately, CSS animations do not support toggling the display property. This limitation causes the second rectangle ...

htmlcss

Tips for emphasizing the letters of the alphabet used in search functionality with Angular

Is there a way to highlight specific alphabets in the searched list instead of highlighting the entire word? Currently, when filtering the memberOffice and memberFacilities lists based on the alphabet entered in the search field, the entire text is highlig ...

javascripthtmlcssangular

Loading background images in CSS before Nivo slider starts causing a problem

I've been struggling with preloading the background image of my wrapper before the nivo-slider slideshow loads. Despite it being just a fraction of a second delay, my client is quite particular about it -_- After attempting various jQuery and CSS tec ...

javascriptjquerycssbackgroundnivo-slider

Heading and paragraph text within the same row

I'm currently facing a challenge while working on the personal portfolio webpage project for freecodecamp. Everything looks good except for one issue. Although I have managed to center align my heading and paragraph text as intended, the paragraph te ...

htmlcss

Steps to create a dynamic <div> that is only visible within a parent <div>

First of all, I want to express my gratitude for welcoming me into the group. I am seeking assistance with an inquiry regarding jQuery animation. The specific animation in question can be seen on the navigation menu items of this template from Template Mon ...

javascriptjqueryhtmlcssanimation

Modify the hash URL in the browser address bar while implementing smooth scrolling and include the active class

I have implemented a smooth scroll technique found here: https://css-tricks.com/snippets/jquery/smooth-scrolling/#comment-197181 $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replac ...

javascriptjquerycsssmooth-scrolling

What is the best way to show a table with 100% width in the Chrome browser?

I am currently working on debugging and expanding an express application that showcases a dataset through a series of nested tables on a webpage. Initially, all the CSS resided within style tags in the head section of the HTML file, and the tables were dis ...

javascripthtmlcsstwitter-bootstrapexpress

Verify that the text entered in the form is accurate, and if it meets the required criteria, proceed to the next

Is it possible to achieve this without using JavaScript? If not, I'd like to find the simplest solution. I have a form that functions similar to a password entry field, and I would like to redirect users to a certain page if they type in a specific p ...

javascripthtmlcss

Guide for manually initiating the mouseleave event on a smartphone or tablet

Is there a way to change the color of a link to orange when it's hovered over? On mobile devices, the link should turn orange when touched and stay that way until the user clicks away. I'd like to manually trigger the mouseout event to remove th ...

javascriptjquerycsstouchscreenmouseleave

Having difficulty adjusting the margin-top for the menu div

Why am I unable to apply margin to my a links within the div identified by id="menu". I can successfully implement margin-left, but when attempting to use margin-top or margin-bottom, it does not work as expected. I wish to adjust the position o ...

csshtmlalignmentmargin

Ways to reduce the size of the border on the bottom in HTML/CSS

Currently, I am working with a div container (utilizing bootstrap.min.css) that contains another class called divborder. The length of the border-bottom in divborder is quite long and I'm wondering how I can adjust it to be shorter. Below is a snippe ...

htmlcss

The CSS outline properties vary between input elements and input elements in focus

I'm encountering an issue with a box and its associated CSS outline style. When the box is focused, it should display a blue outline (which is working fine). However, upon form validation, if there is an error, the .error class is added which should c ...

csshtml

The problem of SVG rendering order requires a solution that does not rely on javascript

I am new to experimenting with inline svg, and I wanted to share my code: <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="350" height="350"> <defs> <style> .ring { transform-origin: 175px 175px; } ...

csssvg