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

What is the best way to add shadow effects to a DIV using CSS?

Is there a way to add shadows within an element using CSS? I attempted the following method but it did not work: #element { shadow: 10px black; } ...

css

targeting a single #Id element that has an aria-expanded attribute set to "true"

I currently have a Bootstrap 4 dropdown feature on my website, both through a hyperlink and also on the sidebar. The styling includes a[aria-expanded="true"]. Unfortunately, this is causing the element below to have a black background, which is ...

htmlcssbootstrap-4

The method of altering a menu link in WordPress using jQuery varies according to whether the user is logged in or not

I need to update the last link on my menu. When a user is logged in, it should display a profile link; otherwise, it should show a sign-up link. ...

javascriptjquerycsswordpress

css Issue with the "left" property

Is it possible to center the left side (left border) of a child div within its parent div? I tried using left: 50% in the CSS for the child div, but it doesn't seem to be working. Can anyone explain why? <div id="outher"> <div id="inner ...

htmlcsspositioning

The background image on my link bar is inexplicably not appearing

I've been trying to solve this issue for hours and I'm at a loss. Initially, the background image was displaying correctly, but now it's not working. HTML: <head> <link type="text/css" rel="stylesheet" href="css/normalize.css" ...

phphtmlcssimagebackground

There was an error loading the resource as the Object does not have the method 'adGallery'

For the past two days, I have been attempting to implement the jQuery plugin "ad-gallery" on my website without success. I must mention that my knowledge in JavaScript and CSS is limited, so the issue could be something simple. The peculiar thing is that ...

jquerycssgallery

What could be causing my border to spill over into the adjacent div?

Trying to set up the contact section of my portfolio but running into an issue where the border of one div is overflowing into the next. Here's a snippet of the code: //CSS .contact-cont { padding: 4rem 12rem 0rem; height: 90vh; ...

htmlcssreactjs

Incorporating a background image into a Material UI theme with CSS styling

When customizing a theme in material UI, one can adjust or override it using the function createMuiTheme. Below is the complete file where this process is carried out: import { createMuiTheme } from '@material-ui/core/styles'; import purple from ...

cssreactjsmaterial-uibackground-imagetypeerror

Tips for dynamically appending a string to a predefined variable in React

When I was working on creating a text input space using the input type area and utilizing the onChange utility, everything was running smoothly. Now, my task is to incorporate an emoji bar and insert a specific emoji into the input space upon clicking it. ...

javascripthtmlcssreactjsuser-interface

Difficulty with alignment in the process of generating a vertical stepper using HTML and CSS

I'm currently working on developing a vertical stepper component using html & css with inspiration from this design. However, I've encountered some alignment issues in the css that I'm struggling to resolve. CSS .steps-container .step::b ...

htmlcss

What is the best way to vertically center a button against a video using CSS?

How can I vertically center a button against a video using CSS? Here is my code: https://jsbin.com/curefoyefe/edit?html,css,js,output <video controls="" ng-show="myForm_live_video.live_video.$valid" ngf-src="live_video" width="200" height="200" class= ...

javascripthtmlcss

Tips on adjusting the height of divs in a simple layout

I'm trying to make two divs fill the page with a ratio of 70% and 30%. However, I don't want to set the size of the "html" or "body" elements. How can I achieve this without affecting the height of the text within the divs? Currently, it only dis ...

htmlcss

I'm experimenting with crafting a new color scheme using MUI, which will dynamically alter the background color of my card based on the API

I am attempting to create a function that will change the colors based on the type of Pokemon. However, I'm not sure how to go about it. Any suggestions or ideas!? Check out where I'm brainstorming this logic [This is where the color palette sh ...

javascriptcssreactjsmaterial-uistyled-components

Why isn't Bootstrap validation functioning properly in my Modal?

I am attempting to implement client-side validation using bootstrap, as outlined here: https://getbootstrap.com/docs/4.0/components/forms/#custom-styles The challenge I'm facing is that my form is within a modal. When I click the submit button, nothi ...

htmlcsstwitter-bootstrapbootstrap-4

Guide to repairing a CSS ball animation

I am attempting to create a simulation where a ball moves in the following pattern: bottom right -> top center -> bottom (/) left. However, my animation seems to be moving from top right -> bottom center -> top left (/). #stage { height:300 ...

htmlcss

displaying the identical image from various perspectives

I have an arrow image that I need to display in different angles - top, left, bottom, right. I was considering what would be the best approach: 1: Changing the image direction via CSS and loading the main image <img src="a.png"> <img src="a.png" ...

androidhtmlcssoptimization

Develop expandable objects containing a set size of items using HTML and CSS

I need help creating a flexible content area using only HTML/CSS. The width of this area should be able to vary from 0 to 50% within its container, which can itself vary from 0 to 100% of the window size. I have two items that need to be positioned next ...

htmlcssresponsive-design

What is the best way to convert this JavaScript iteration function into jQuery?

I recently encountered an issue with my JavaScript function that returns a list of elements with the class ".youtube", loops through them, and calls another function. The JavaScript logic is flawless, but I wanted to convert it into jQuery for better reada ...

javascriptjqueryhtmlcss

When using CSS border-width:1px, I notice that the borders aren't consistently thin

I'm attempting to add thin borders to a div. My CSS code is as follows: border: solid; border-width: 1px; However, the resulting borders appear unevenly thin in my browser. The borders on the left and bottom seem thicker than those on the right and ...

css

Deactivate the connection button for accessing the database

I'm currently developing a PHP script to establish a connection with a MySQL database. My goal is to deactivate a button and display a spinner image when I click on a submit button to initiate the database connection. Below is the code snippet I have ...

phpcssbootstrap-4