CODEWITHSUNDEEP
htmlcsscss-grid
David Miller
David Miller

Reputation: 23

Sticking together two columns whilest using CSS Grid?

I have the following basic page mockup:
PREVIEW: https://cdpn.io/saadsawash/debug/vYxGKEJ/jVMpoEwGoaBk
CODE:

<div class="sidebar"></div>
<div class="card-a"></div>
<div class="card-b"></div>
<div class="card-c"></div>
<div class="topbar"></div>

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    padding: 18px;
    margin: 0;
    display: grid;
    gap: 18px;
    grid-template-columns: 0.8fr 1fr 2fr 2fr;
    grid-template-rows: 0.2fr 1.8fr 1fr;
    grid-template-areas: 
        "sidebar cardA topbar topbar"
        "sidebar cardA cardB cardC"
        "sidebar cardA cardB cardC";
}

.sidebar {
    background-color: blueviolet;
    grid-area: sidebar;
}

.card-a {
    background-color: burlywood;
    grid-area: cardA;
}

.card-b {
    background-color: cornflowerblue;
    grid-area: cardB;
}

.card-c {
    background-color: crimson;
    grid-area: cardC;
}

.topbar {
    background-color:deeppink;
    grid-area: topbar;
}

I want the first and second columns to be sticked together.

I could create it as a one big div but it's not what I am after, since each column represents a card with seperate information.

Is it possible to reset grid gap to 0 only between the first and second columns?

What I am trying to achieve:
enter image description here

Upvotes: 0

Views: 528

Answers (2)

dale landry
dale landry

Reputation: 8610

Simply add some margin on your split card, this will allow you to push over the items with only the gap that will part the left side column into two columns. Set your gap to 1px or 2px depending on what you want between the two columns that make up that left side column, then push over the two columns with right side columns next to them with margin-right.

Set the parent container to 100vw and 100vh.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 0.6fr 1fr 1.2fr 1.2fr;
  grid-template-rows: 0.3fr 0.3fr 2.4fr;
  gap: 1px 1px;
  grid-template-areas:
    "card-a-1 card-a-2 top-card top-card"
    "card-a-1 card-a-2 teachers-staff teachers-staff"
    "card-a-1 card-a-2 card-b card-c";
  background: #EEE;
  width: 100vw;
  height: 100vh;
  padding: 12px;
}
.radius {
  border-radius: 7px;
}

.card-a-1 { 
  grid-area: card-a-1;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
  background: blueviolet;
}
.card-a-2 { 
  grid-area: card-a-2; 
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  margin-right: 15px;
  background: burlywood;
}
.top-card { 
  grid-area: top-card; 
  background: deeppink;
}
.teachers-staff { 
  grid-area: teachers-staff; 
  display: flex;
  align-items: center;
  margin-left: 20px;
}
.card-b { 
  grid-area: card-b; 
  margin-right: 15px;
  background: cornflowerblue;
}
.card-c { 
  grid-area: card-c; 
  background: crimson;
}
<div class="container">
  <div class="card-a-1"></div>
  <div class="card-a-2"></div>
  <div class="top-card radius"></div>
  <div class="teachers-staff">Teaching Staff</div>
  <div class="card-b radius"></div>
  <div class="card-c radius"></div>
</div>

Upvotes: 1

risaddex
risaddex

Reputation: 91

You can wrap them in another Div with the same attributes:

<div class="parent">
    <div class="sidebar"></div>
    <div class="card-a"></div>
</div>
    <div class="card-b"></div>
    <div class="card-c"></div>
    <div class="topbar"></div>

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    padding: 18px;
    margin: 0;
    display: grid;
    gap: 18px;
    grid-template-columns: 1.8fr 2fr 2fr;
    grid-template-rows: 0.2fr 1.8fr 1fr;
    grid-template-areas: 
        "parent topbar topbar"
        "parent cardB cardC"
        "parent cardB cardC";
}



.parent {
    grid-area: parent;
    display:grid;
    grid-template-columns: 0.8fr 1fr;
    
}

.card-a {
    background-color: burlywood;
/*     grid-area: cardA; */
}

.sidebar {
    background-color: blueviolet;
    /* height: 100%; */
/*     grid-area: sidebar; */
}

.card-b {
    background-color: cornflowerblue;
    grid-area: cardB;
}

.card-c {
    background-color: crimson;
    grid-area: cardC;
}

.topbar {
    background-color:deeppink;
    grid-area: topbar;
}

Upvotes: 0

Related Questions