What steps should I take to design a CSS grid layout similar to this?

Question

What steps should I take to design a CSS grid layout similar to this?

I'm currently working on creating a grid layout similar to the designs shown below:

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

While I have been successful in most aspects of the layout, I am facing difficulty with the first column. I'm trying to prevent it from spanning the full height of the row, aiming for a grid layout similar to the one illustrated in the first image. The gray cells represent divs where additional content will be inserted later.

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

Below is a snippet of my CSS code:

.cards_grid {
    grid-auto-columns: 1fr;
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    -ms-grid-rows: auto 1.5rem auto;
    grid-template-areas:
        "first first first first second second second second second third third third"
        "fourth fourth fourth fourth fifth fifth fifth fifth sixth sixth sixth sixth";
    -ms-grid-columns: minmax(auto, 1fr);
    grid-template-columns: minmax(auto, 1fr);
}

I've also experimented with grid-layout-rows: masonry, but unfortunately, it lacks support across various browsers.

html css css-grid

Answer 1

Answer №1

By sticking to the method of explicitly defining grid areas, you can apply the same technique for vertical placement as you do for horizontal placement. For example, if you have defined 12 columns horizontally, you can extend this approach vertically.

In this case, it appears that the grid will consist of 5 rows, with certain elements spanning multiple rows. This snippet streamlines the CSS and sets the entire grid to have a 4:3 aspect ratio, though you may need to adjust this based on your specific requirements.

.cards_grid {
  width: 100vmin;
  height: 75vmin;
  display: grid;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  grid-template-areas: "first first first first second second second second" "first first first first second second second second" "third third third fourth second second second second" "third third third fourth fifth fifth fifth sixth sixth sixth" "third third third fourth fifth fifth fifth sixth sixth sixth";
}

.cards_grid > div {
  background: gray;
}

.cards_grid > div:nth-child(1) {
  grid-area: first;
}

.cards_grid > div:nth-child(2) {
  grid-area: second;
}

.cards_grid > div:nth-child(3) {
  grid-area: third;
}

.cards_grid > div:nth-child(4) {
  grid-area: fourth;
}

.cards_grid > div:nth-child(5) {
  grid-area: fifth;
}

.cards_grid > div:nth-child(6) {
  grid-area: sixth;
}

<div class="cards_grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Answer 2

By sticking to the method of explicitly defining grid areas, you can apply the same technique for vertical placement as you do for horizontal placement. For example, if you have defined 12 columns horizontally, you can extend this approach vertically.

In this case, it appears that the grid will consist of 5 rows, with certain elements spanning multiple rows. This snippet streamlines the CSS and sets the entire grid to have a 4:3 aspect ratio, though you may need to adjust this based on your specific requirements.

.cards_grid {
  width: 100vmin;
  height: 75vmin;
  display: grid;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  grid-template-areas: "first first first first second second second second" "first first first first second second second second" "third third third fourth second second second second" "third third third fourth fifth fifth fifth sixth sixth sixth" "third third third fourth fifth fifth fifth sixth sixth sixth";
}

.cards_grid > div {
  background: gray;
}

.cards_grid > div:nth-child(1) {
  grid-area: first;
}

.cards_grid > div:nth-child(2) {
  grid-area: second;
}

.cards_grid > div:nth-child(3) {
  grid-area: third;
}

.cards_grid > div:nth-child(4) {
  grid-area: fourth;
}

.cards_grid > div:nth-child(5) {
  grid-area: fifth;
}

.cards_grid > div:nth-child(6) {
  grid-area: sixth;
}

<div class="cards_grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Answer 3

Answer №2

If you're looking for an alternative, I'd recommend giving this a shot and see how it works out for you

<!DOCTYPE html>
<html>
<head>
<style>
body{
      padding: 0;
    margin: 0;
}
.container{
      width: 100%;
    height: 490px;
    background: #e5e5e5;
    display: flex;
    flex-wrap: wrap;
}
.box-cl-1{
      width: 30%;
    display: flex;
    flex-direction: column;
}

.box-1{
    margin: 10px;
      flex: 30%;
    height: 130px;
    background: #8f8f8f;
}

.box-2{
    margin: 10px;
      flex: 50%;
    height: 200px;
    background: #8f8f8f;
}

.box-cl-2{
    width: 70%;
    display: flex;
    flex-direction: column;
}

.box-3{
    margin: 10px;
    flex: 70%;
    height: 250px;
    background: #8f8f8f;
}

.box-4{
    margin: 10px;
    flex: 30%;
    height: 250px;
    background: #8f8f8f;
}

.box-5{
    margin: 10px;
      flex: 50%;
    height: 200px;
    background: #8f8f8f;
}

.box-6{
    margin: 10px;
      flex: 50%;
    height: 200px;
    background: #8f8f8f;
}

</style>
</head>
<body>

<div class="container">
    <div class="box-cl-1">
      <div class="box-1"></div>
      <div class="box-2"></div>
    </div>
    <div class="box-cl-2">
        <div style="display: flex;">
            <div class="box-3"></div>
            <div class="box-4"></div>
        </div>
        <div style="display: flex;">
            <div class="box-5"></div>
            <div class="box-6"></div>
        </div>
    </div>
</div>

</body>
</html>

Answer 4

If you're looking for an alternative, I'd recommend giving this a shot and see how it works out for you

<!DOCTYPE html>
<html>
<head>
<style>
body{
      padding: 0;
    margin: 0;
}
.container{
      width: 100%;
    height: 490px;
    background: #e5e5e5;
    display: flex;
    flex-wrap: wrap;
}
.box-cl-1{
      width: 30%;
    display: flex;
    flex-direction: column;
}

.box-1{
    margin: 10px;
      flex: 30%;
    height: 130px;
    background: #8f8f8f;
}

.box-2{
    margin: 10px;
      flex: 50%;
    height: 200px;
    background: #8f8f8f;
}

.box-cl-2{
    width: 70%;
    display: flex;
    flex-direction: column;
}

.box-3{
    margin: 10px;
    flex: 70%;
    height: 250px;
    background: #8f8f8f;
}

.box-4{
    margin: 10px;
    flex: 30%;
    height: 250px;
    background: #8f8f8f;
}

.box-5{
    margin: 10px;
      flex: 50%;
    height: 200px;
    background: #8f8f8f;
}

.box-6{
    margin: 10px;
      flex: 50%;
    height: 200px;
    background: #8f8f8f;
}

</style>
</head>
<body>

<div class="container">
    <div class="box-cl-1">
      <div class="box-1"></div>
      <div class="box-2"></div>
    </div>
    <div class="box-cl-2">
        <div style="display: flex;">
            <div class="box-3"></div>
            <div class="box-4"></div>
        </div>
        <div style="display: flex;">
            <div class="box-5"></div>
            <div class="box-6"></div>
        </div>
    </div>
</div>

</body>
</html>

Answer 5

Answer №3

A great option is to implement a basic masonry style for your website. Check out this resource on GitHub:

Answer 6

A great option is to implement a basic masonry style for your website. Check out this resource on GitHub:

Answer 7

Answer №4

To start creating your grid layout, you first need to define a wrapper with the class .grid-box. Next, specify the structure of your grid using properties like grid-template-columns and grid-template-rows.

Once your template is set, you can position each individual box within the grid using properties like grid-*-start. Below is an example template for a grid layout:

.grid-box {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-template-rows: 25% 25% 25%;
  grid-gap: 10px;
  padding: 10px;
}

.box-1 {
  background: red;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}
...

<div class="grid-box">
    <div class="box-1">1</div>
    <div class="box-2">2</div>
    <div class="box-3">3</div>
    <div class="box-4">4</div>
    <div class="box-5">5</div>
    <div class="box-6">6</div>
</div>

Answer 8

To start creating your grid layout, you first need to define a wrapper with the class .grid-box. Next, specify the structure of your grid using properties like grid-template-columns and grid-template-rows.

Once your template is set, you can position each individual box within the grid using properties like grid-*-start. Below is an example template for a grid layout:

.grid-box {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-template-rows: 25% 25% 25%;
  grid-gap: 10px;
  padding: 10px;
}

.box-1 {
  background: red;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}
...

<div class="grid-box">
    <div class="box-1">1</div>
    <div class="box-2">2</div>
    <div class="box-3">3</div>
    <div class="box-4">4</div>
    <div class="box-5">5</div>
    <div class="box-6">6</div>
</div>

What steps should I take to design a CSS grid layout similar to this?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The animations in fontawesome 6.2 are completely ineffective

Ways to align two HTML elements on the same line but on different sides

Choosing the type attribute of an input tag by using a javascript variable as a condition: What's the best approach?

Utilize a React component within a JavaScript file by incorporating ReactDOM in a script found in an HTML file

Tips on introducing a random pattern into a Javascript gaming experience

What is the best method for accessing data values from HTML within a JavaScript function?

Facebook is failing to detect any meta tags in the header of my React web application

How can you determine the index of a table column in JavaScript when you only know its class name?

Display of items in a submenu through a drop-down menu when hovering over it

Utilizing PHP variables within HTML code that is stored within another PHP variable

What is the best way to assign my function to dynamically generated cards in vanilla JavaScript using event delegation?

Creating smooth animations in JavaScript without relying on external libraries such as jQuery

Is there a way to ensure that GIFs in jQuery Mobile always start from the beginning?

Displaying information based on selection in AngularJSIn this tutorial

Seeking assistance in comprehending the method for styling table data using inline CSS in a JavaScript file

Issue with JQuery addClass functionality in Firefox

Access a webpage in an html document using URL variables

What is the best way to measure the timing of consecutive events within a web browser, utilizing JavaScript within an HTML script tag?

Guide to utilizing a download link for file retrieval in Python

How come my blocks are spilling over into other blocks?