Saya memiliki mockup halaman dasar berikut:
PREVIEW: https://cdpn.io/saadsawash/debug/vYxGKEJ /jVMpoEwGoaBk
KODE:

<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;
}

Saya ingin kolom pertama dan kedua disatukan.

Saya dapat membuatnya sebagai satu div besar tetapi bukan itu yang saya cari, karena setiap kolom mewakili kartu dengan informasi terpisah.

Apakah mungkin untuk mengatur ulang celah kisi ke 0 hanya antara kolom pertama dan kedua?

Apa yang saya coba capai:
masukkan deskripsi gambar di sini html css css-grid

0
David Miller 14 Mei 2021, 00:17

2 jawaban

Jawaban Terbaik

Cukup tambahkan beberapa margin pada kartu split Anda, ini akan memungkinkan Anda untuk mendorong item hanya dengan celah yang akan membagi kolom sisi kiri menjadi dua kolom. Atur celah Anda menjadi 1px atau 2px tergantung pada apa yang Anda inginkan di antara dua kolom yang membentuk kolom sisi kiri itu, lalu dorong dua kolom dengan kolom sisi kanan di sebelahnya dengan margin-right.

Atur wadah induk ke 100vw dan 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>
1
dale landry 13 Mei 2021, 23:19

Anda dapat membungkusnya di Div lain dengan atribut yang sama:

<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;
}
0
risaddex 13 Mei 2021, 21:38