Maintained grid column stability amidst various modifications

I have a complex 2-column grid layout, and the example shown here is just one part of it. The complete code follows a similar structure. I am looking for a way to ensure that the green box always stays close to the red box in the layout, without having a fixed size. If the content in the right column exceeds that of the left first item, I want block D and block B to be positioned next to each other seamlessly.

.container {
  display: grid;
  grid-template-areas: "d c" "b a";
  grid-column-gap: 16px;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
}

.a {
  grid-area: a;
  background-color: blue;
}

.b {
  grid-area: b;
  background-color: green;
}

.c {
  grid-area: c;
  background-color: purple;
}

.d {
  grid-area: d;
  background-color: red;
}

.block {
  /* height:300px; */
}
<div class="container">
  <div class="block a">
    Lorem ipsum dolor sit amet.
  </div>
  <div class="block b">
    Lorem ipsum dolor sit amet, consectetur adipisicing.
  </div>
  <div class="block c">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi quod ea aperiam consequatur fugiat libero voluptate accusantium amet corporis laborum in, quae ratione, atque assumenda. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid
    enim labore, eaque quidem repellendus atque!
  </div>
  <div class="block d">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae blanditiis laudantium sit, pariatur omnis quibusdam?
  </div>
</div>
csscss-grid

Answer №1

Try utilizing
grid-auto-rows: minmax(100px, auto) within the container class and eliminate the
align-items: baseline; to enhance your layout

.container {
  display: grid;
  grid-template-areas:  "d c" "b a";
  grid-column-gap: 16px;
  grid-template-columns: 1fr 1fr;
  /*align-items: baseline;*/
  grid-auto-rows: minmax(100px, auto);
}

.a {

  grid-area: a;
  background-color: blue;
}

.b {
  grid-area: b;
  background-color: green;
}

.c {
  grid-area: c;
  background-color: purple;
}

.d {
  grid-area: d;
  background-color: red;
}

.block {
  /* height:300px; */
<!DOCTYPE html>
<html>
<head>
<title>Web Page Design</title>
</head>
<body>
<div class="container">
  <div class="block a">
    Lorem ipsum dolor sit amet.
    
  </div>
  <div class="block b">
    Lorem ipsum dolor sit amet, consectetur adipisicing.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi quod ea aperiam consequatur fugiat libero voluptate accusantium amet corporis laborum in, quae ratione, atque assumenda. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid
    enim labore, eaque quidem repellendus atque!
    
  </div>
  <div class="block c">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi quod ea aperiam consequatur fugiat libero voluptate accusantium amet corporis laborum in, quae ratione, atque assumenda. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid
    enim labore, eaque quidem repellendus atque!
  </div>
  <div class="block d">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae blanditiis laudantium sit, pariatur omnis quibusdam?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi quod ea aperiam consequatur fugiat libero voluptate accusantium amet corporis laborum in, quae ratione, atque assumenda. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid
    enim labore, eaque quidem repellendus atque!
  </div>
</div>
</body>
</html>

Answer №2

Experiment with the CSS property grid-template-areas. Take a look at this sample code.

.container {
  display: grid;
  grid-template-areas: " d c "
                       " b c "
                       " . c "
                       " . a "
                       " . a "
                       " . a ";
  grid-column-gap: 16px;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
}

.a {
  grid-area: a;
  background-color: blue;
}

.b {
  grid-area: b;
  background-color: green;
}

.c {
  grid-area: c;
  background-color: purple;
}

.d {
  grid-area: d;
  background-color: red;
}

.block {
  /* height:300px; */
}
<div class="container">
  <div class="block a">
    Lorem ipsum dolor sit amet.
  </div>
  <div class="block b">
    Lorem ipsum dolor sit amet, consectetur adipisicing.
  </div>
  <div class="block c">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi quod ea aperiam consequatur fugiat libero voluptate accusantium amet corporis laborum in, quae ratione, atque assumenda. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid
    enim labore, eaque quidem repellendus atque!
  </div>
  <div class="block d">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae blanditiis laudantium sit, pariatur omnis quibusdam?
  </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

Can this layout be achieved using DIV elements?

Struggling to create a unique HTML/CSS layout that extends beyond the center? Imagine a standard horizontally centered page, but with one div expanding all the way to the right edge of the browser window. This design should seamlessly adjust to window res ...

csslayouthtml

Internet Explorer 9 users experience a sudden blank page display

Are there any effective methods for diagnosing why a page suddenly becomes blank in Internet Explorer? I am aware that switching to Compatibility Mode 7 is an option, however dealing with the quirks of IE7 can be even more challenging. ...

cssinternet-explorerinternet-explorer-9

Can HTML/CSS be used to specifically target handheld mobile devices?

I am looking to optimize my video display in HTML by only showing it on desktop browsers. The difference in bandwidth between desktop and mobile devices is affecting the performance of mobile browsers, so I want to target only desktop users. Is there a way ...

javascripthtmlcssvideomobile

What is the best way to modify CSS animation property without causing any disruptions?

Could you help me with modifying this CSS animation? I want to adjust the animation-iteration-count to 1 only when a certain property, status, is added to the element. Currently, the animation is not working as expected. For example: setTimeout(() => ...

htmlcss

Html content overlapping div rather than being stacked vertically

My goal is to arrange a group of divs inside another div in a vertical stack. However, I am facing an issue where the text from the last div is overlapping with the second div instead of following a proper vertical alignment where the text in the third div ...

javascripthtmlcss

Resolving the Table Issue with 'onclick' in Javascript

Apologies for the lack of creativity in the title, I struggled to come up with something fitting. Currently, I am engaged in the development of a user-friendly WYSIWYG site builder. However, I have encountered an obstacle along the way. I've devised ...

javascripthtmlcss

Tips for positioning a Wordpress navigation bar to the right of a logo

My goal is to position the navigation bar next to the logo in my Wordpress theme using Underscores. I have successfully aligned the primary navigation and the logo as desired with the following CSS: .main-navigation { position: relative; float: ri ...

htmlcsswordpress

How can I make the top two divs stay fixed as I scroll down, and then reset back to their initial position when scrolled

Hey there, I'm looking to have a div stay fixed after scrolling within its parent div. <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div class="fw ofndr-box"> <div class="ofndr-box-half add-here"> <a href="#! ...

javascriptjqueryhtmlcss

What is the best way to align two HTML elements in a single column?

I need to adjust the layout of an existing <td> in order to display a checkbox and one additional field on the same line. The current setup places these elements on separate lines. Below is the provided HTML code: <!DOCTYPE html> <html> ...

htmlcsshtml-table

Internet Explorer does not recognize the specific CSS code

My goal is to create a website that behaves differently on Internet Explorer browser. I am attempting to achieve this by using a separate CSS for IE and another CSS for different browsers. However, the IE-specific CSS does not seem to be working. <h ...

htmlcssinternet-explorerinternet-explorer-8

Using jQuery, encapsulate an image within a div element and transfer the floating style attribute from the image to the div

Can anyone assist me in wrapping an image within a div along with transferring the float setting? This is my current code: $('.photo-img').wrap('<div class="photo-wrap" />'); I would like the new div to inherit the float proper ...

jqueryhtmlcss

Challenge with CSS Layering

I'm currently experiencing some issues with layering on my website. The problem at hand is that visitors are unable to interact with links within the div layers for some unknown reason. They can't click on the sidebar images or highlight text. I& ...

css

Activate all chosen CSS circles

I'm currently working on creating a progress bar using CSS circles. The idea is that when you click on each circle in sequence (1, 2, 3), all three circles and the line connecting them will fill up with red color. If you then go back (3, 2, 1), the co ...

javascripthtmlcss

What is the best way to connect or link to a HTML table row <tr>

Is there a way to trigger an alert when the user double clicks on the whole row? ...

javascripthtmlcsshtml-table

Modifying the color of a div based on a specified value using JavaScript

<div id="navigation"> Add your text here </div> <input type="text" id="newColor"><button onclick="modifyColor()">Update</button> <script> function modifyColor(){ var chosenColor = document.getElementB ...

javascripthtmlcssbackground-color

Unusual conduct exhibited by jQuery's css() function for setting the width

My goal is to retrieve the width of the initial .imagen element and apply it to the img within .imagen. HTML: <div class="imagen"> <div class="normal"> <img> </div> <div class="hover"> <img> ...

jqueryhtmlcss

The MUI component with hideBackDrop={true} is preventing me from clicking outside of the Drawer component to close it

I implemented a Drawer component which opens when an icon on the Map is clicked. The drawer menu appears along with a backshadow that drops over the map. Interestingly, clicking on the map while the backshadow is displayed closes the drawer without any i ...

cssreactjsmaterial-uimui-datatablemui-x

Solving the right-to-left orientation issue in the Bootstrap navbar

I have implemented a navbar using the code below, which aligns well from the right side. However, the menu items are sorted in ltr order and I need them to be in rtl order, so that "Dropdown 1" starts from the right side of the page. Currently, it appears ...

htmlcssbootstrap-4

Menu changes when hovering

I want to create an effect where hovering over the .hoverarea class will toggle the visibility of .sociallink1, .sociallink2, and so on, with a drover effect. However, my code isn't working as expected. Additionally, an extra margin is automatically ...

javascripthtmlcsshover

How can I customize the color of the disabled state in a mat-slide-toggle?

I am trying to customize the disabled state color of a mat-slide-toggle. This is what my slide toggle currently looks like: Here is the code I have been using: <div> <mat-slide-toggle>Slide me!</mat-slide-toggle> </div> Can any ...

cssangularangular-material