Hybrid Layout using a Fusion of Two CSS Grids

Question

Hybrid Layout using a Fusion of Two CSS Grids

Currently, I am working on an assignment that involves creating two groups of CSS grids intertwined with each other. The desired layout should resemble the image provided.

https://i.sstatic.net/U56jP.png

Below is the code snippet I am using:

.group1 .item1 {
  grid-column: 1 / 4;
}

.group1 .item2 {
  grid-column: 1;
}

.group1 .item3 {
  grid-column: 2 / 4;
}

.group2 .item4 {
  grid-column: 2 / 3;
}

.group2 .item5 {
  grid-column: 3 / 4;
}

.group2 .item6 {
  grid-column: 2 / 4;
}
.container {
  display: grid;
  grid-gap: 5px;
  max-width: 1200px;
  margin: 0 auto 100px auto;
  border: 8px dashed #999;
}

<section class="part5 container">
  <div class="container group1">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
  </div>
  <div class="container group2">
    <div class="item item4">Item 4</div>
    <div class="item item5">Item 5</div>
    <div class="item item6">Item 6</div>
  </div>
</section>

I have been unable to achieve the expected output as shown in the [image] provided, and I must retain the existing HTML structure. Any assistance in rectifying this would be greatly appreciated.

html css css-grid

Answer 1

Answer №1

To prevent subcontainers from interfering and better organize your elements, you can utilize display:contents along with display grid and grid-area properties.

It's worth noting that this approach may not be fully supported across all browsers at the moment.

Here is a demonstration of the concept:

.part5 {
  display: grid;
  grid-template-colums: repeat(6, 1fr);
  min-height: 100vh
}

.container.group1,
.container.group2 {
  display: contents;
}

.item1 {
  grid-column: 1/ span 6;
  grid-row: 1;
  border: solid;
  color: tomato;
}

.item2 {
  grid-row: 2 /span 3;
  grid-column: 1 /span 2;
  border: solid;
  color: turquoise;
}

item3 {
  grid-row: 2;
  grid-column: 3/span 4;
  border: solid;
  color: green;
}

...

<section class="part5 container">
...
</section>

https://css-tricks.com/get-ready-for-display-contents/

—a magical new display value that essentially makes the container disappear, making the child elements children of the element the next level up in the DOM.

A simple tweak to your code could involve updating it as follows:

.container {
  display: contents
}
...

The more direct way would be to have both groups share the same grid structure while overlapping them:

.container {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.group1 {
  grid-row: 1 / span 4;
  grid-column: 1 / span 6;
}

group2 {
  grid-template-rows: repeat(2, 1fr);
...

<section class="part5 container">
...
</section

Answer 2

To prevent subcontainers from interfering and better organize your elements, you can utilize display:contents along with display grid and grid-area properties.

It's worth noting that this approach may not be fully supported across all browsers at the moment.

Here is a demonstration of the concept:

.part5 {
  display: grid;
  grid-template-colums: repeat(6, 1fr);
  min-height: 100vh
}

.container.group1,
.container.group2 {
  display: contents;
}

.item1 {
  grid-column: 1/ span 6;
  grid-row: 1;
  border: solid;
  color: tomato;
}

.item2 {
  grid-row: 2 /span 3;
  grid-column: 1 /span 2;
  border: solid;
  color: turquoise;
}

item3 {
  grid-row: 2;
  grid-column: 3/span 4;
  border: solid;
  color: green;
}

...

<section class="part5 container">
...
</section>

https://css-tricks.com/get-ready-for-display-contents/

—a magical new display value that essentially makes the container disappear, making the child elements children of the element the next level up in the DOM.

A simple tweak to your code could involve updating it as follows:

.container {
  display: contents
}
...

The more direct way would be to have both groups share the same grid structure while overlapping them:

.container {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.group1 {
  grid-row: 1 / span 4;
  grid-column: 1 / span 6;
}

group2 {
  grid-template-rows: repeat(2, 1fr);
...

<section class="part5 container">
...
</section

Answer 3

Answer №2

.main-container{
  display: grid;
  grid-template-columns: repeat(6,auto);
  grid-gap: 5px;
  grid-template-areas: 
  'square1 square1 square1 square1 square1 square1'
  'square2 square2 square3 square3 square3 square3'
  'square2 square2 square3 square3 square3 square3'
  'square2 square2 square4 square4 square5 square5'
  'square2 square2 square4 square4 square5 square5'
  'square2 square2 square6 square6 square6 square6'
  ;
}
.square{
  border: 2px solid black;
  background-color: lightblue;
  padding: 10px;
  border-radius: 12px;
  text-align: center;
}
#square1{
  grid-area: square1;
}
#square2{
  grid-area: square2;
}
#square3{
  grid-area: square3;
}
#square4{
  grid-area: square4;
}
#square5{
  grid-area: square5;
}
#square6{
  grid-area: square6;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div class="main-container">
        <div class="square" id="square1">item-1</div>
        <div class="square" id="square2">item-2</div>
        <div class="square" id="square3">item-3</div>
        <div class="square" id="square4">item-4</div>
        <div class="square" id="square5">item-5</div>
        <div class="square" id="square6">item-6</div>
    </div>
</body>
</html>

Answer 4

.main-container{
  display: grid;
  grid-template-columns: repeat(6,auto);
  grid-gap: 5px;
  grid-template-areas: 
  'square1 square1 square1 square1 square1 square1'
  'square2 square2 square3 square3 square3 square3'
  'square2 square2 square3 square3 square3 square3'
  'square2 square2 square4 square4 square5 square5'
  'square2 square2 square4 square4 square5 square5'
  'square2 square2 square6 square6 square6 square6'
  ;
}
.square{
  border: 2px solid black;
  background-color: lightblue;
  padding: 10px;
  border-radius: 12px;
  text-align: center;
}
#square1{
  grid-area: square1;
}
#square2{
  grid-area: square2;
}
#square3{
  grid-area: square3;
}
#square4{
  grid-area: square4;
}
#square5{
  grid-area: square5;
}
#square6{
  grid-area: square6;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div class="main-container">
        <div class="square" id="square1">item-1</div>
        <div class="square" id="square2">item-2</div>
        <div class="square" id="square3">item-3</div>
        <div class="square" id="square4">item-4</div>
        <div class="square" id="square5">item-5</div>
        <div class="square" id="square6">item-6</div>
    </div>
</body>
</html>

Answer 5

Answer №3

`display: subgrid`

To efficiently address this issue, utilizing display: subgrid is recommended. This CSS Grid feature is tailored for layouts like these, enabling nested grid containers to recognize the grid lines of the primary container.

Unfortunately, despite its benefits, this feature is currently unavailable. More information can be found here.

`grid-template-areas`

Another effective solution would involve making the primary container (.part5.container) a grid container and structuring the child containers as needed using grid-template-areas.

Similar to the previous feature, grid-template-areas is not yet accessible. Additional details are provided here.

A Creative Approach

This approach combines CSS Grids with a touch of absolute positioning to work around the missing features mentioned earlier. No modifications are necessary in the HTML structure.

.part5.container {
  display: grid;
  border: 8px dashed #999;
  height: 100vh;
  grid-template-rows: auto auto;
  grid-template-columns: 35% 1fr;
  grid-template-areas: " group1 group1 " 
                       "   .    group2 ";
}

.container.group1 {
  grid-area: group1;
  display: grid;
  grid-template-rows: 50px 1fr;
  grid-template-columns: 35% 1fr;
  grid-gap: 5px;
  position: relative;
}

.item1 {
  grid-column: 1 / -1;
}

.item2 {
  position: absolute;
  top: 55px;  
  width: 35%; 
  height: calc(100vh - 71px); 
}

.item3 {
  grid-column: 2;
}

.container.group2 {
  grid-area: group2;
  display: grid;
  grid-template-rows: 1fr 50px;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
  margin: 5px 0 0 5px;
}

.item6 {
  grid-column: 1 / -1;
}

.item {
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

<section class="part5 container">
  <div class="container group1">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
  </div>
  <div class="container group2">
    <div class="item item4">Item 4</div>
    <div class="item item5">Item 5</div>
    <div class="item item6">Item 6</div>
  </div>
</section>

Answer 6

`display: subgrid`

To efficiently address this issue, utilizing display: subgrid is recommended. This CSS Grid feature is tailored for layouts like these, enabling nested grid containers to recognize the grid lines of the primary container.

Unfortunately, despite its benefits, this feature is currently unavailable. More information can be found here.

`grid-template-areas`

Another effective solution would involve making the primary container (.part5.container) a grid container and structuring the child containers as needed using grid-template-areas.

Similar to the previous feature, grid-template-areas is not yet accessible. Additional details are provided here.

A Creative Approach

This approach combines CSS Grids with a touch of absolute positioning to work around the missing features mentioned earlier. No modifications are necessary in the HTML structure.

.part5.container {
  display: grid;
  border: 8px dashed #999;
  height: 100vh;
  grid-template-rows: auto auto;
  grid-template-columns: 35% 1fr;
  grid-template-areas: " group1 group1 " 
                       "   .    group2 ";
}

.container.group1 {
  grid-area: group1;
  display: grid;
  grid-template-rows: 50px 1fr;
  grid-template-columns: 35% 1fr;
  grid-gap: 5px;
  position: relative;
}

.item1 {
  grid-column: 1 / -1;
}

.item2 {
  position: absolute;
  top: 55px;  
  width: 35%; 
  height: calc(100vh - 71px); 
}

.item3 {
  grid-column: 2;
}

.container.group2 {
  grid-area: group2;
  display: grid;
  grid-template-rows: 1fr 50px;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
  margin: 5px 0 0 5px;
}

.item6 {
  grid-column: 1 / -1;
}

.item {
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

<section class="part5 container">
  <div class="container group1">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
  </div>
  <div class="container group2">
    <div class="item item4">Item 4</div>
    <div class="item item5">Item 5</div>
    <div class="item item6">Item 6</div>
  </div>
</section>

Answer 7

Answer №4

As I dedicated time to honing my grid skills, I crafted the following code structure based on the layout you provided:

body {
    margin: 0;
    padding: 0;
    font-family: Trebuchet MS;
    background: #000;
    height: 100vh;
}
.grid-container {
    display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(6, 1fr);
        /* grid-template-rows: auto; */
    gap: 8px;   
  border: 8px dashed #888;
}

.each-grid-item {
    text-align: center;
    align-content: center;
    padding: 30px;
    border: 2px solid red;
    background: #000;
    color: #fff;
    }

.grid-item-1 {
    grid-column: 1/7;
    grid-row: auto;
}

.grid-item-2 {
    grid-column: 1/3;
    grid-row: 2/7;
}

.grid-item-3 {
    grid-column: 3/7;
    grid-row: 2/4;
}

.grid-item-4{
    grid-column: 3/5;
    grid-row: 4/6;
}

.grid-item-5{
        grid-column: 5/7;
        grid-row: 4/6;
}

.grid-item-6{
    grid-column: 3/7;
    grid-row: 6/7;
    
}

<div class="grid-container">
  <div class="each-grid-item grid-item-1">1</div>
  <div class="each-grid-item grid-item-2">2</div>
  <div class="each-grid-item grid-item-3">3</div>
  <div class="each-grid-item grid-item-4">4</div>
  <div class="each-grid-item grid-item-5">5</div>
  <div class="each-grid-item grid-item-6">6</div>
</div>

Answer 8

As I dedicated time to honing my grid skills, I crafted the following code structure based on the layout you provided:

body {
    margin: 0;
    padding: 0;
    font-family: Trebuchet MS;
    background: #000;
    height: 100vh;
}
.grid-container {
    display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(6, 1fr);
        /* grid-template-rows: auto; */
    gap: 8px;   
  border: 8px dashed #888;
}

.each-grid-item {
    text-align: center;
    align-content: center;
    padding: 30px;
    border: 2px solid red;
    background: #000;
    color: #fff;
    }

.grid-item-1 {
    grid-column: 1/7;
    grid-row: auto;
}

.grid-item-2 {
    grid-column: 1/3;
    grid-row: 2/7;
}

.grid-item-3 {
    grid-column: 3/7;
    grid-row: 2/4;
}

.grid-item-4{
    grid-column: 3/5;
    grid-row: 4/6;
}

.grid-item-5{
        grid-column: 5/7;
        grid-row: 4/6;
}

.grid-item-6{
    grid-column: 3/7;
    grid-row: 6/7;
    
}

<div class="grid-container">
  <div class="each-grid-item grid-item-1">1</div>
  <div class="each-grid-item grid-item-2">2</div>
  <div class="each-grid-item grid-item-3">3</div>
  <div class="each-grid-item grid-item-4">4</div>
  <div class="each-grid-item grid-item-5">5</div>
  <div class="each-grid-item grid-item-6">6</div>
</div>

Hybrid Layout using a Fusion of Two CSS Grids

Answer №1

Answer №2

Answer №3

`display: subgrid`

`grid-template-areas`

A Creative Approach

Answer №4

Similar questions

Improving the Efficiency of CSS Selectors

Changing the type of value in a React select onChange

My attempts to troubleshoot the JavaScript function have all been unsuccessful

Creating a unit by merging variables in SASS

Selecting a specific element from a group of elements sharing the same class using JQuery

Issue with importing styles within a media query

Problem with CSS/SASS dropdown navigation bar

Preventing the background color from exceeding the text boundaries using CSS

Styling with CSS

Struggling with a CSS problem that jQuery can't seem

Steps to showcase specific data in the bootstrap multi-select dropdown menu sourced from the database

When the CSS animation has finished in JavaScript

choosing a specific element within an HTML string stored in a variable

The 'formGroup' property cannot be bound in the LoginComponent because it is not recognized as a valid property of the 'form'

Move the container all the way to the left

Using Python to scrape the contents of a webpage that contains JavaScript, potentially utilizing the Selenium library

Tips for maintaining consistent email formatting across mobile devices

Exploring GLTF models with Threejs - just a click away!

What could be causing my background image to vanish or flicker in Bootstrap?

Hiding a span element with CSS and revealing it on hover is possible, but this technique does not apply to p elements