CODEWITHSUNDEEP
csscss-grid
Curtis K. Peterson
Curtis K. Peterson

Reputation: 1

fixed grid column while other changes

I have 2 column complex grid layout, in example is just one part of it. My full code is similar to that. Is there any way, with css grid, green box will always stay near the red box, without any fixed size. if right column item has more content then left first item I want block D and block B will be next to each other without space.

.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>

Upvotes: 0

Views: 39

Answers (2)

Saurav Prasad
Saurav Prasad

Reputation: 58

you can use
grid-auto-rows: minmax(100px, auto) in the container class and remove the
align-items: baseline; which can help you with that

.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>

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371213

Tinker with grid-template-areas. Here's an example.

.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>

Upvotes: 0

Related Questions