मैंने हाल ही में html और CSS सीखना शुरू किया है। मैंने एक बहुत ही सरल सीएसएस ग्रिड लेआउट बनाया है, लेकिन यह इच्छित वर्ग लेआउट के बजाय एक क्षैतिज पट्टी बनाता है। मैं क्या गलत कर रहा हूं?

.header {
  grid-area: "h";
}

.sideMenu {
  grid-area: "s";
}

.content {
  grid-area: "c";
}

.footer {
  grid-area: "f";
}

.grid-body {
  display: grid;
  grid-template-areas: 
        ". h h h ."
        "s . . . ."
        "s . c c ."
        ". . c c ."
        ". f f . .";
}
<div class="grid-body">
  <div class="header">Header</div>
  <div class="sideMenu">Side Menu</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>
0
xerox 4 नवम्बर 2021, 23:31
2
grid-area मानों के आसपास कोई उद्धरण नहीं है। उदा. grid-area: "s"; के बजाय grid-area: s;
 – 
j08691
4 नवम्बर 2021, 23:41

2 जवाब

सबसे बढ़िया उत्तर

जैसा कि एक टिप्पणी में बताया गया है, ग्रिड-क्षेत्र का मूल्य उद्धरणों में नहीं होना चाहिए।

एक अच्छी युक्ति यह है कि अपने ब्राउज़र के देव उपकरण निरीक्षण सुविधा का उपयोग करें और प्रत्येक तत्व से जुड़े सीएसएस को देखें। आपके मामले में आपके स्निपेट के साथ मैंने ग्रिड-क्षेत्र के बगल में एक पीला चेतावनी त्रिकोण देखा, जिस पर मुझे चेतावनी दी गई थी कि संपत्ति का मूल्य अमान्य था।

.header {
  grid-area: h;
}

.sideMenu {
  grid-area: s;
}

.content {
  grid-area: c;
}

.footer {
  grid-area: f;
}

.grid-body {
  display: grid;
  grid-template-areas: 
        ". h h h ."
        "s . . . ."
        "s . c c ."
        ". . c c ."
        ". f f . .";
}
<div class="grid-body">
  <div class="header">Header</div>
  <div class="sideMenu">Side Menu</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>
2
A Haworth 4 नवम्बर 2021, 23:50
.header {
    grid-area:h;
}

.sideMenu {
    grid-area:s;
}

.content {
    grid-area:c;
}

.footer {
    grid-area:f;
}

.grid-body {
    display:grid;
    grid-template-areas:
        ". h h h ."
        "s . . . ."
        "s . c c ."
        ". . c c ."
        ". f f . .";
}
<html>
    <head>
        <title>Grid Experiment :: Home</title>
        <link rel="stylesheet" href="grid_style.css"/>
    </head>

    <body>
        <div class="grid-body">
            <div class="header">Header</div>
            <div class="sideMenu">Side Menu</div>
            <div class="content">Content</div>
            <div class="footer">Footer</div>
        </div>
    </body>
</html>
0
Arezou Saremian 4 नवम्बर 2021, 23:46