Saya sedang membangun kerangka untuk situs yang sedang dibuat. Saya kira pertanyaan yang saya dapatkan mungkin adalah pertanyaan noob tetapi saya masih harus menanyakannya dan semoga, itu akan membantu orang lain.

body, html {
    margin: 0;
    padding: 0;
}

#maingrid {
    display: grid;
    height: 100vh;
    width: 100vw;
    margin: 0 auto;
    grid-template-columns: 0.5fr repeat(2, 2fr) 0.5fr;
    grid-template-rows: auto;
    grid-template-areas: 
    ". first first ."
    "second second second second"
    "third third third third"
    "fourth fourth fourth fourth"
    "fifth fifth fifth fifth";
}

.firstrow {
    grid-area: 1 / span 4;
    justify-self: center;
    background-color: #0080bf;
}

.firstcontent {
    display: inline-grid;
    width: 60vw;
    grid-template-columns: 50% 50%;
    grid-template-rows: 100%;
}

.firsttext {
    grid-column: 1 / 2;
    text-align: center;
}

.firstnav {
    grid-column: 2 / 3;
    text-align: right;
}

.secondtrow {
    grid-area: second;
}

.thirdrow {
    grid-area: third;
    background-color: mediumorchid;
}

.fourthrow {
    grid-area: fourth;
}

.fifthrow {
    grid-area: fifth;
    background-color: #0080bf;
}
<!doctype html>

<html lang="sv">
<head>
  <meta charset="utf-8">

  <title>grid</title>

  <link rel="stylesheet" href="css/styles.css">

</head>

<body>
<div id="maingrid">
    <div class="firstrow">
        <div class="firstcontent">
            <div class="firsttext">Test</div>
            <div class="firstnav">tesT</div>
        </div>
    </div>
    <div class="secondrow"></div>
    <div class="thirdrow"></div>
    <div class="fourthrow"></div>
    <div class="fifthrow"></div>
</div>

</body>
</html>

Di situs codepen, saya memiliki apa yang telah dilakukan sejauh ini, dan ya itu adalah pembuatan grid yang cukup canggih yang perlu saya lakukan.

Lalu apa pertanyaannya? Nah warna latar belakang pada baris pertama, saya membutuhkannya untuk menjangkau seluruh baris tidak hanya di belakang konten.

Hal menyenangkan lainnya adalah kode yang sama menunjukkan warna apa pun pada baris kelima di lingkungan lokal saya menggunakan FF70.

0
swe_mattias 29 Oktober 2019, 12:08

1 menjawab

Jawaban Terbaik

Saya membuat beberapa perubahan pada kode dan sepertinya berhasil sekarang. Kode berikut mungkin bisa membantu Anda, saya mengubah .firstcontent dan .firstrow.

body, html {
    margin: 0;
    padding: 0;
}

#maingrid {
    display: grid;
    height: 100vh;
    width: 100vw;
    margin: 0 auto;
    grid-template-columns: 0.5fr repeat(2, 2fr) 0.5fr;
    grid-template-rows: auto;
    grid-template-areas: 
    ". first first ."
    "second second second second"
    "third third third third"
    "fourth fourth fourth fourth"
    "fifth fifth fifth fifth";
}

.firstrow {
    display: grid;
    grid-area: 1 / span 4;
    justify-items: center;
    background-color: #0080bf;
}

.firstcontent {
    display: grid;
    width: 60vw;
    grid-template-columns: 50% 50%;
}

.firsttext {
    grid-column: 1 / 2;
    text-align: center;
}

.firstnav {
    grid-column: 2 / 3;
    text-align: right;
}

.secondrow {
    grid-area: second;
}

.thirdrow {
    grid-area: third;
    background-color: mediumorchid;
}

.fourthrow {
    grid-area: fourth;
}

.fifthrow {
    grid-area: fifth;
    background-color: #0080bf;
}

Saya tidak dapat membuat ulang masalah lain untuk baris kelima.

1
Georgi Grigorov 29 Oktober 2019, 10:41