试图让 CSS 网格布局正确答案

【问题标题】：Trying to get CSS grid layout correct试图让 CSS 网格布局正确
【发布时间】：2021-01-10 00:49:09
【问题描述】：

我正在使用 HTML 和 CSS 设计自己的网站。我决定使用如下网格：

/* Style the grid container */

.item1 {
  grid-area: logo;
}

.item2 {
  grid-area: cta;
}

.item3 {
  grid-area: menu;
}

.item4 {
  grid-area: spacer;
}

.item5 {
  grid-area: left;
}

.item6 {
  grid-area: right;
}

.grid-container {
  display: grid;
  grid-template-areas: 'logo cta cta' 'menu menu menu' 'spacer  spacer spacer' 'left right right';
  grid-gap: 10px;
  padding: 10px;
}

.grid-container>div {
  border: 1px solid rgba(0, 0, 0, 0.8);
}

.item1 img {
  min-width: 200px;
}


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

@media (max-width: 600px) {
  .grid-container {
    grid-template-areas: 'logo' 'cta' 'menu' 'spacer' 'left' 'right';
  }
}

<div class="grid-container">
  <div class="item1">
    <img src="Images/DN signatur    es/dn_gold.png" style="width:25%" alt="" />
  </div>
  <div class="item2">
    <p>dermot at dermotnolan dot ie</p>
  </div>
  <div class="item3">
    <div class="topnav" id="myTopnav">
      <a class="mnu active" href="#home">Home</a>
      <a class="mnu" href="#about">About me</a>
      <a class="mnu" href="#gallery">Gallery</a>
      <a class="mnu" href="#imw">IMW</a>
      <a class="mnu" href="#blog">Blog</a>
      <a class="icon" href="javascript:void(0);" style="font-size:18px;" onclick="myFunction()">&#9776;</a>
    </div>
  </div>
  <div class="item4">
    <br/>
  </div>
  <div class="item5">
    <h2>Column 1 in Myriad</h2>
    <h5>A heading in Consolas</h5>
  </div>
  <div class="item6">
    <h2>Column 1 in Myriad</h2>
    <h5>A heading in Consolas</h5>
    <h2>Column 1 in Myriad</h2>
    <h5>A heading in Consolas</h5>
    <h2>Column 1 in Myriad</h2>
    <h5>A heading in Consolas</h5>
  </div>

</div>

我的问题是它看起来像这样：

我期望最左侧的项目（徽标，左侧）为一栏宽...

我确定我遗漏了一些简单的东西，如果有人可以提出建议，我将不胜感激。

提前致谢，

德莫特

【问题讨论】：

"... 我希望最左边的项目（徽标，左）为一栏宽”。你到底是什么意思？你能分享一张你所追求的图片吗？

标签： css grid-layout

【解决方案1】：

我想你忘记在 HTML 文档中调用你的 CSS 文件了。您需要在 HTML 文件的头部调用您的 CSS 文件，如下例所示：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link  type="text/css" rel="stylesheet"  href="/css/styles.css">
<title></title>
</head>

I have attached a picture of my output.[screenshot of the picture][1]
[1]: https://i.stack.imgur.com/8LxGK.png

【讨论】：

【解决方案2】：

实际上我引用了我的 CSS - 您在上面看到的只是代码的摘录。

但是，我设法找到了一个完美的解决方案：

=================================================
grid elemnent styling copied from 
https://css-tricks.com/simple-named-grid-areas/#top-of-site
as well as W3Schools
=================================================
*/ 

/*HEADER area */
.gridheader {
  display: grid;
  grid-gap: 10px;
  padding: 10px;
  grid-template-columns: 300px 1fr  1fr;
  grid-template-areas: 
    'logo logo cta'
    'menu menu menu'
    'spacer spacer spacer';
}
/*MAIN area */
.gridcolumns {
  display: grid;
  grid-gap: 10px;
  padding: 10px;
  grid-template-columns: 1fr 1fr  1fr;
  grid-template-areas: 'left right right';
}

【讨论】：