How can I create a three-column layout in CSS grid where there is one large column on the left and two smaller columns on the right?

Question

How can I create a three-column layout in CSS grid where there is one large column on the left and two smaller columns on the right?

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

Hi there! I'm currently working on replicating the image above using CSS grid and I've almost got it, but I'm facing an issue with the main content section that includes "Your Projects," "Announcements," and "Trending." My goal is to have "Your Projects" take up a large portion of the grid, with "Announcements" and "Trending" positioned to the right of it. I've been trying to adjust the row sizes for each section so that "Your Projects" and "Announcements" expand while "Trending" remains a small box next to "Announcements," but I can't seem to get it just right. How can I make this work effectively?

html

                <div class="main-content-grid-container">
                <div class="projects-container main-content-grid">
                    <h1>projects</h1>
                </div>
                <div class="announcements-container main-content-grid">
                    <h1>announcements</h1>
                </div>
                <div class="trending-container main-content-grid">
                    <h1>trending</h1>
                </div>
            </div>

css

.main-content-container{
    background-color: #fafafa;
}

.main-content-grid-container{
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 10fr 1fr;
    
}

.projects-container{

}

.announcements-container{
}

.trending-container{
    grid-area: 2/3/2/2;
}

.main-content-grid{
    border: 2px black solid;
    background-color: goldenrod;
}

html css css-grid

Answer 1

Answer №1

In a similar fashion:

* {
    margin: 0px;
    padding: 0px;
}

body {
    background: blue;
}

.mainContent {
    position: absolute;
    float: left;
    width: 65%;
    padding: 10px 10px;
    justify-content: center;
    align-items: center;
}

.rightContent {
    float: right;
    width: 30%;
    padding: 10px 10px;
    justify-content: center;
    align-items: center;
}

.card-box {
    background: red;
    position: relative;
    padding: 20px 10px;
    margin: 20px 0px;
    border-radius: 5px;
}

.card-box .inner {
    padding: 5px 10px 0 10px;
}

<!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">
  </head>

  <body>
  
    <div class="mainContent">
      <div class="card-box">
        <div class="inner">
          test
        </div>
      </div>
    </div>

    <div class="rightContent">
      <div class="card-box">
        <div class="inner">
          test
        </div>
      </div>
    </div>
    
  </body>
  
</html>

Then proceed to generate 2 additional columns:

* {
    margin: 0px;
    padding: 0px;
}

body {
    background: blue;
}

.mainContent {
    position: absolute;
    float: left;
    width: 65%;
    padding: 10px 10px;
    justify-content: center;
    align-items: center;
    display: table;
    clear: both;
}

.rightContent {
    float: right;
    width: 30%;
    padding: 10px 10px;
    justify-content: center;
    align-items: center;
}

.card-box {
    background: white;
    background: red;
    position: relative;
    padding: 20px 10px;
    margin: 20px 0px;
    border-radius: 5px;
    
    /*Only for demostration*/
    height: 300px;
}

.column {
  background: green;
  width: 40%;
  padding: 10px;
  border-radius: 5px;
}

<!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">
  </head>

  <body>
  
    <div class="mainContent">
      <div class="card-box">
        <div class="inner">
          <div class="column" style="float: left;">
            <p>test</p>
          </div>
          <div class="column" style="float: right;">
            <p>test</p>
          </div>
        </div>
      </div>
    </div>

    <div class="rightContent">
      <div class="card-box">
        <div class="inner">
          test
        </div>
      </div>
    </div>
    
  </body>
  
</html>

Answer 2

In a similar fashion:

* {
    margin: 0px;
    padding: 0px;
}

body {
    background: blue;
}

.mainContent {
    position: absolute;
    float: left;
    width: 65%;
    padding: 10px 10px;
    justify-content: center;
    align-items: center;
}

.rightContent {
    float: right;
    width: 30%;
    padding: 10px 10px;
    justify-content: center;
    align-items: center;
}

.card-box {
    background: red;
    position: relative;
    padding: 20px 10px;
    margin: 20px 0px;
    border-radius: 5px;
}

.card-box .inner {
    padding: 5px 10px 0 10px;
}

<!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">
  </head>

  <body>
  
    <div class="mainContent">
      <div class="card-box">
        <div class="inner">
          test
        </div>
      </div>
    </div>

    <div class="rightContent">
      <div class="card-box">
        <div class="inner">
          test
        </div>
      </div>
    </div>
    
  </body>
  
</html>

Then proceed to generate 2 additional columns:

* {
    margin: 0px;
    padding: 0px;
}

body {
    background: blue;
}

.mainContent {
    position: absolute;
    float: left;
    width: 65%;
    padding: 10px 10px;
    justify-content: center;
    align-items: center;
    display: table;
    clear: both;
}

.rightContent {
    float: right;
    width: 30%;
    padding: 10px 10px;
    justify-content: center;
    align-items: center;
}

.card-box {
    background: white;
    background: red;
    position: relative;
    padding: 20px 10px;
    margin: 20px 0px;
    border-radius: 5px;
    
    /*Only for demostration*/
    height: 300px;
}

.column {
  background: green;
  width: 40%;
  padding: 10px;
  border-radius: 5px;
}

<!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">
  </head>

  <body>
  
    <div class="mainContent">
      <div class="card-box">
        <div class="inner">
          <div class="column" style="float: left;">
            <p>test</p>
          </div>
          <div class="column" style="float: right;">
            <p>test</p>
          </div>
        </div>
      </div>
    </div>

    <div class="rightContent">
      <div class="card-box">
        <div class="inner">
          test
        </div>
      </div>
    </div>
    
  </body>
  
</html>

Answer 3

Answer №2

It appears that the goal is to keep the trending section within the right-hand column underneath announcements. To achieve this, you can enclose both announcements and trending in their own div:

<div class="main-content-grid-container">
    <div class="projects-container main-content-grid">
        <h1>projects</h1>
    </div>
    <div>
        <div class="announcements-container main-content-grid">
            <h1>announcements</h1>
        </div>
        <div class="trending-container main-content-grid">
            <h1>trending</h1>
        </div>
    </div>
</div>

You can then apply any desired spacing and styling to this new div containing both announcements and trending.

Answer 4

It appears that the goal is to keep the trending section within the right-hand column underneath announcements. To achieve this, you can enclose both announcements and trending in their own div:

<div class="main-content-grid-container">
    <div class="projects-container main-content-grid">
        <h1>projects</h1>
    </div>
    <div>
        <div class="announcements-container main-content-grid">
            <h1>announcements</h1>
        </div>
        <div class="trending-container main-content-grid">
            <h1>trending</h1>
        </div>
    </div>
</div>

You can then apply any desired spacing and styling to this new div containing both announcements and trending.

How can I create a three-column layout in CSS grid where there is one large column on the left and two smaller columns on the right?

Answer №1

Answer №2

Similar questions

Add a new div in Javascript and include an HTML icon inside

Establish the lowest possible height for Angular Material Expansion Panel Content

Add a CSS class to an innerHTML element just a single time

Can CSS Grid layout be used to generate a grid consisting of squares?

Is Selenium Webdrive the superior choice over direct requests?

Looping through a nested for loop within an HTML table

The script for Angular2 index.html cannot be included because it is not found

I'm curious if there is a tool available for comparing front-end testing results on a WordPress site, particularly to identify any differences before and after making updates

Unique style for custom vue multiselect component

How can I use Selenium in combination with Python to retrieve the visible text of a selected radio button or checkbox on a webpage?

The symbol "#" appears in my URL whenever the link is clicked

Sending a file along with other form data simultaneously

Newbie inquiries regarding the process of migrating a CRUD application to PhalconPHP

Centered text in <td> with CSS aligned to the right

Navigating the rollout of a fresh new design

Applying Bootstrap's inline styling to adjust the width of a label

What is the method for rotating a map using JavaScript?

Revamp the HTML table with JavaScript headers

Creating effective href anchors within an iframe using the `srcdoc` attribute

The battle between Hover, Focus, and Blur modes intensifies