Html - A column spanning 2 rows of grid but there are 2 grids in different elements

YashGorasia
July 11, 2024
107 views
0 votes
2 Answers

I have one .container class in my CSS with max-width: 1400px property. Now I have a layout in which there are two different sections with 2 columns and the first column of first section is spanning 2 rows (refer the image below).
Demo layout design

In the image the dashed line (—) is the .container with max-width. Now the issue with this layout is that I want background (gradient and image both) in the first section and white background in the second section. The red box in the design (i.e. the column that spans 2 rows) should adjust it’s height if the content of the second section gets longer.

I can easily achieve this layout using CSS Grid but how do I set the background of the first section?

Also if there is any way I can add an element in the first section inside the grid and make it’s width equal to the viewport and height equal to the height of the first row of grid + the distance of the grid from the top of the viewport. This might help as well.

Note: I can use JavaScript for this to calculate a few things and get the output but I would prefer CSS only solution first (if there exists one).

I tried positioning the left column element to absolute. By this it is overflowing to the second section but height of the element is not the same as the content of the second section.

Here is the small demo in which I need help.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

section {
  padding-block: 2rem;
}

.container {
  width: min(1400px, 90%);
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns: min(200px, 100%) 1fr;
  gap: 1rem;
  align-items: start;
  
  & > * {
    border: 2px solid;
  }
}

.one {
  background: linear-gradient(45deg in oklch, lightblue, hotpink)
}

.two main {
  grid-column: 2
}

<section class="one">
  <div class="container">
    <div class="grid">
      <aside>
        <h1>Sidebar Title</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, id quae ut itaque architecto sunt odit exercitationem sed illum impedit maxime placeat ducimus. Quae dicta aliquid assumenda minus voluptates quo repellendus dolores eum ea veritatis ipsum unde, porro enim velit!</p>
        <p>Voluptates, dignissimos sequi at tempora doloremque veritatis, id ut facilis sit assumenda molestiae! Omnis ullam, quod dolorum soluta facere aut exercitationem corrupti, commodi eveniet sit possimus expedita voluptatibus hic dicta, consequatur eum dolor quibusdam error ab necessitatibus! Perferendis, excepturi voluptas?</p>
        <p>Dolor labore quisquam nobis cumque tempore magni facilis. Illum voluptatibus iusto cum. Reprehenderit dolor aspernatur, minus tempore, et totam fuga illum, nemo facilis soluta laudantium magnam! Officiis sequi hic commodi iste libero. Accusamus nihil mollitia accusantium quaerat eligendi assumenda veniam?</p>
      </aside>
      <main>
        <h1>This is main content</h1>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deleniti expedita laudantium iure, quidem laborum saepe fugit doloremque magni neque! Praesentium omnis dicta provident repellat nobis expedita, perferendis iusto dolorem ipsa?</p>
        <p>Cum, minus. Libero praesentium magnam, ratione necessitatibus earum dolor ea delectus voluptas numquam, sed molestias. Animi fugiat officia, earum corrupti amet debitis, excepturi cum quam exercitationem et quisquam reiciendis temporibus!</p>
      </main>
    </div>
  </div>
</section>

<section class="two">
  <div class="container">
    <div class="grid">
      <main>
        <h1>Second Section Title</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa soluta nihil exercitationem quidem, nesciunt voluptas quaerat voluptate dolorum placeat nisi aspernatur quibusdam suscipit consequatur similique, in vel cumque. Aut, perspiciatis.</p>
        <p>Ipsam, tempore vel? Animi, labore. Soluta amet molestiae tempora veniam dolorem! Ipsum beatae, quisquam rerum nulla voluptas facere aliquam cumque, est pariatur aperiam eligendi incidunt adipisci quas maxime reprehenderit excepturi.</p>
        <p>Fugit tenetur iste corrupti veniam corporis rerum exercitationem consectetur beatae ipsa, nobis, nemo odit in minus facilis nam necessitatibus obcaecati blanditiis maiores quidem cum consequuntur dicta voluptatibus, earum totam. Consectetur.</p>
        <p>Accusantium dolor ratione aliquam facere, reiciendis cumque! Dolores voluptatibus earum sed officia nemo itaque laudantium dolorem perspiciatis doloremque, excepturi magnam accusantium nisi esse ipsum assumenda quo est impedit cum? Exercitationem?</p>
        <p>Excepturi accusamus quia id facilis molestiae, cum atque reiciendis at odio illo ad quibusdam necessitatibus quo rem quam? Nam, perspiciatis doloribus pariatur distinctio id illo reiciendis aperiam debitis minus inventore.</p>
      </main>
    </div>
  </div>
</section>

Answers

#element1, #element2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.grid1 {
  grid-column: 1 / 3; /* Spans across both columns */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
 padding-top:5px;
}

.item {
  padding: 20px;
  background-color: lightblue;
  border: 1px solid black;
}

.span-two {
  grid-row: span 2; /* Spans across two rows */
}

<div id="element1">
  <div class="grid1">
    <div class="item">Item 1</div>
    <div class="item span-two">Spanning Column</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
  </div>
</div>

<div id="element2">
  <div class="grid2">
    <div class="item">Item A</div>
    <div class="item">Item B</div>
    <div class="item">Item C</div>
    <div class="item">Item D</div>
  </div>
</div>

This is achieved by using grid layout, but has some flaws: regarding a11n, this markup is not very clear and needs improvements. Futhermore, as shown below, you cannot use gap without having a bit of the grid background appearing (the gray line between the two sections). So either you need to rely on margins & padding, either you set the background of the grid to white/black to hide the problem

.grid {
  --inline-margin-size: 5rem;
  --block-margin-size: 2rem;
  background: gray;
  display: grid;
  grid-template-rows: var(--block-margin-size) 5rem auto auto var(--block-margin-size);
  grid-template-columns: var(--inline-margin-size) 1fr 1fr var(--inline-margin-size);
  max-width: 1400px;
  gap: 10px;
}

.header {
  grid-column: 2 / 4;
  grid-row: 2 / 3;
  text-align: center; 
  padding: .5rem 1rem;
  background: gray;
}

.first-section {
  grid-row: 1 / 4;
  grid-column: 1 / 5;
  background: black;
}

.second-section {
  grid-row: 4 / 6;
  grid-column: 1 / 5;
  background: white;
}


.left {
  background: red;
  grid-row: 3 / 5;
  grid-column: 2/3;
}

.first-right {
  background: blue;
  height: 200px;
  grid-row: 3 / 4;
  grid-column: 3/4;
  margin-bottom: 20px;
}

.second-right {
  margin-top: 20px;
  background: green;
  height: 200px;
  grid-row: 4 / 5;
  grid-column: 3/4;
}

<div class="grid">
  <div class="first-section"></div>
  <div class="second-section"></div>
  <div class="header">Header</div>
  <aside class="left">This is the left section lot of text etcccc.......</aside>
  <div class="first-right">b</div>
  <div class="second-right">c</div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – A column spanning 2 rows of grid but there are 2 grids in different elements

Answers