How to make a CSS Grid layout with automatic height that includes a single column containing multiple content blocks?

I've been exploring the website and attempting to implement a similar layout, but I'm facing some challenges in getting it to look how I want. Please refer to the image I've attached for reference. Is there a straightforward CSS-Grid method to achieve this? https://i.sstatic.net/jDBcZ.png

Here is the CSS code snippet I have been working on:

.main-container {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
}

.box {
  height: min-content;
  
}

/* Selecting the 2nd content block in column 3 */
.box.d {
  grid-column: 3/6;
}

And here is the HTML structure I have implemented so far:

<div class="main-container">
  <div class="box a">Content Here</div>
  <div class="box b">Content Here</div>
  <div class="box c">Content Here</div>
  <div class="box d">Content Here</div>
  <div class="box e">Content Here</div>
  <div class="box f">Content Here</div>
</div>

Answer №1

Here is the solution you've been searching for:

codepen link

.main-container {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
  grid-template-rows: 2fr 2fr 1fr;
  background: #ccc;
  padding: 20px;
  width: 1200px;
}

.box {
  background: #fff;
  padding: 20px;
}

.box.d {
    grid-area: 2 / 3 / 4 / 3;
}
.box.b {
    grid-area: 1 / 2 / 3 / 3;
}
<div class="main-container">
  <div class="box a">Content Here</div>
  <div class="box b">Content Here</div>
  <div class="box c">Content Here</div>
  <div class="box d">Content Here</div>
  <div class="box e">Content Here</div>
  <div class="box f">Content Here</div>
<div>

However, keep in mind that the layout might vary based on the column content.

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

Automatically adjust the tooltip's position if it extends beyond the width of the browser

I am looking for a way to ensure that when the tooltip width exceeds the browser's viewable area, it will automatically reposition itself so that the content can be fully viewed. It is important that the tooltip does not overlap on the referenced div ...

What is the method for inserting a line break following an input element using CSS?

I am utilizing a service that provides me with dynamic HTML containing labels and inputs as shown below: input:after { content: "\a"; white-space: pre; } <label for="username">Username</label> <input type="text" id="username" nam ...

Expanding a div to occupy 100% width within a Material UI TableBody

I am struggling to center a CircularProgress component inside a material UI TableBody. I have attempted the following code, but the CircularProgress is not displaying at the center as expected. (Please note that only relevant code has been included) const ...

The flexbox layout is not properly stacking div rows in a column

Objective: Creating a flexbox layout with a responsive background image that adjusts in height when the screen size changes, causing elements to wrap; In addition, there is a fixed header bar at the top of the page. The layout consists of a full-screen co ...

Enhance your photographic experience with the JavaScript Camera API on Android (Froyo

I have been attempting to utilize the JavaScript Camera API through the Android browser, as showcased at Google IO on Froyo. Despite having Froyo on my Nexus1, I am encountering difficulties accessing navigator.device and navigator.camera properties, bo ...

Looking to add a dynamic divider between two columns that can be adjusted in width by moving the mouse left and right?

If you're looking for an example of two columns adjusting their width based on mouse movement, check out this page from W3Schools. I'm trying to implement this feature in my React app, but I'm unsure of how to proceed. Below is the JSX code ...

Attempting to emulate the grid showcase using flexbox styling

Creating this layout using CSS Grid was a breeze. However, I wonder if it can be achieved with Flexbox. What do you think? .Message { display: inline-grid; grid-template-areas: ". name""date text"; } .Date { align-items: ...

Running a CSS keyframes animation can be achieved by removing the class associated with it

Is there a way to reverse the CSS animation when a class is removed? I'm trying to achieve this on my simple example here: https://codepen.io/MichaelRydl/pen/MWPvxex - How can I make the animation play in reverse when clicking the button that removes ...

Troubleshooting problem with CSS combinators

I'm having trouble with this, if I have these two tag combinations in my CSS: aside h4 { color:yellow; } article h4 { color:blue; } And I apply them to the following HTML: <div> <h4>International new</h4> ...

Using jQuery to remove all inline styles except for a specific one

Just a quick inquiry: Our Content Management System (CMS) utilizes CKEditor for clients to modify their websites. The front-end styles include the use of a pre tag, which we have customized to our desired appearance. However, when their team members copy a ...

What is the best way to loop through an array and apply classes to each element separately?

I'm currently working on a unique jQuery plugin that is designed to create dynamic lists based on any data provided. The first 6 items in the list will always remain constant, regardless of the input data. When I say constant, I mean that although th ...

How to set a variable in a Python Selenium script based on webpage content

I attempted this method but it did not yield the desired results Is there a way to capture the value of an element from a web page and assign it to a variable using Selenium with Python in PyCharm? 250 a = driver.get.element(By.ID, "rate").tex ...

The ability to choose only one option in a checkbox within a grid view column

In my grid view, I have a checkbox in the last column. I am trying to ensure that only one row can be selected at a time. <tr *ngFor="let permit of PermitDetails" (click)="GoByClick(permit)"> <td style="text-align: center">{{permit.TVA_BAT ...

What is the best way to set the background opacity to 0.7 without impacting the content within it?

Currently, I'm facing an issue with two divs - the outer one is identified as "BD" and the inner one as "content". Whenever I attempt to reduce the opacity of BD's background-color, the content inside also becomes less opaque including both image ...

Instructions on integrating iframe into Slides on material-auto-rotating-carousel

Looking to swap out the carousel slide image with a loom video. Any ideas on how to replace the media img with an iframe in material-auto-rotating-carousel? const AutoRotatingCarouselModal = ({ handleOpen, setHandleOpen, isMobile }) => { return ( ...

Is it possible to create HTML tables without including paragraphs within the cells using docutils rst2html?

If my input rst file looks like this: +--------------------------------+ | Table H1 | +-------------+------------------+ | Table H2a | Table H2b | +=============+==================+ | a1 | b1 | +------ ...

Is there a way to adjust the height overflow using a percentage?

I have a coding dilemma here where I am attempting to make the SearchLocationCards overflow. It seems to work fine with 'px' and 'vh' values, but the '%' value doesn't seem to have any effect. How can I adjust the height ...

AngularJs Number Formatting: A Step-By-Step Guide

Is there a way to format a number from 10000 to 10,000.00 using only HTML and the ng-Model directive, without involving the controller file? I attempted to achieve this in the controller file through logic, but it always returns the number in the "10,00 ...

Turn an item by x degrees, not towards x degrees

Is there a way to rotate an object by a specific degree, rather than to a specific degree? I am familiar with using transform/-webkit-transform to rotate an object by a set degree, but I am looking for a method that will rotate my object by the specified ...

Tips for extracting title and image from someone else's blog posts to share on your own website

Currently, I am in the process of creating a website where I can showcase my personally curated content. I have been struggling to figure out how to seamlessly integrate this content into my site without relying on an API. My initial idea was to manually ...