Grid属性不起作用，因为代码不是以网格表格格式排列的。

huangapple
go评论98阅读模式
英文:

Grid Property is not working as the code is not in the grid tabular format

问题

以下是您的代码中需要翻译的部分：

"我正在尝试创建一个用于我的Freecodecamp项目的基本投资组合，但我无法理解为什么网格属性不起作用。

这是代码：

#projects {
padding: 3rem 2rem;
width: 100%;
height: 120%;
background-color: #3c6382;
}

#projects h2 {
text-align: Center;
text-decoration: underline;
color: #c8d6e5;
font-size: 2rem;
}

.img {
margin-top: 4rem;
width: 40%;
border: 0.5rem solid white;
}

.project-title {
color: white;
font-size: 1.5rem;
margin-left: 4rem;
}

#projects-grid {
display: grid;
grid-template-columns: repeat(autofit, minmax(320px, 1fr));
}

这是我的一些项目：

这是我希望输出的格式，但它没有以网格的形式显示：

"

英文:

I am trying to built a basic portfolio for my Freecodecamp project but I cannot understand by error as to why the grid property is not working.

Here is the code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. #projects {
  2.   padding: 3rem 2rem;
  3.   width: 100%;
  4.   height: 120%;
  5.   background-color: #3c6382;
  6. }
  8. #projects h2 {
  9.   text-align: Center;
  10.   text-decoration: underline;
  11.   color: #c8d6e5;
  12.   font-size: 2rem;
  13. }
  15. .img {
  16.   margin-top: 4rem;
  17.   width: 40%;
  18.   border: 0.5rem solid white;
  19. }
  21. .project-title {
  22.   color: white;
  23.   font-size: 1.5rem;
  24.   margin-left: 4rem;
  25. }
  27. #projects-grid {
  28.   display: grid;
  29.   grid-template-columns: repeat(autofit, minmax(320px, 1fr));
  30. }

<!-- language: lang-html -->

  1. &lt;section id=&#39;projects&#39;&gt;
  2.   &lt;h2&gt;Here are some of my Projects:&lt;/h2&gt;
  3.   &lt;div id=&quot;projects-grid&quot;&gt;
  4.     &lt;a href=&quot;&quot;&gt;
  5.       &lt;img src=&quot;https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440&quot; class=&quot;img&quot;&gt;&lt;/image&gt;
  6.       &lt;p class=&#39;project-title&#39;&gt;Tribute page&lt;/p&gt;
  7.     &lt;/a&gt;
  8.     &lt;a href=&quot;&quot;&gt;
  9.       &lt;img src=&quot;https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440&quot; class=&quot;img&quot;&gt;&lt;/image&gt;
  10.       &lt;p class=&#39;project-title&#39;&gt;Tribute page&lt;/p&gt;
  11.     &lt;/a&gt;
  12.     &lt;a href=&quot;&quot;&gt;
  13.       &lt;img src=&quot;https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440&quot; class=&quot;img&quot;&gt;&lt;/image&gt;
  14.       &lt;p class=&#39;project-title&#39;&gt;Tribute page&lt;/p&gt;
  15.     &lt;/a&gt;
  16.     &lt;a href=&quot;&quot;&gt;
  17.       &lt;img src=&quot;https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440&quot; class=&quot;img&quot;&gt;&lt;/image&gt;
  18.       &lt;p class=&#39;project-title&#39;&gt;Tribute page&lt;/p&gt;
  19.     &lt;/a&gt;
  20.     &lt;a href=&quot;&quot;&gt;
  21.       &lt;img src=&quot;https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440&quot; class=&quot;img&quot;&gt;&lt;/image&gt;
  22.       &lt;p class=&#39;project-title&#39;&gt;Tribute page&lt;/p&gt;
  23.     &lt;/a&gt;
  24.     &lt;a href=&quot;&quot;&gt;
  25.       &lt;img src=&quot;https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440&quot; class=&quot;img&quot;&gt;&lt;/image&gt;
  26.       &lt;p class=&#39;project-title&#39;&gt;Tribute page&lt;/p&gt;
  27.     &lt;/a&gt;
  28.   &lt;/div&gt;
  29.   &lt;/div&gt;
  30. &lt;/section&gt;

<!-- end snippet -->

This is the format I want my output to be in, but it isn't going in a grid:

<a href="https://i.stack.imgur.com/kggzT.png"><img src="https://i.stack.imgur.com/kggzT.png"></a>

答案1

得分: 1

以下是您提供的内容的翻译：

  1. #projects {
  2.   padding: 3rem 2rem;
  3.   /* 大多数元素（默认情况下）的宽度是
  4.      声明的宽度加上边框宽度
  5.      和填充; 这意味着此元素的宽度是：
  6.        父元素宽度的100%，再加上4rem
  7.        （每边2rem）
  8.      由于它的100% + 4rem，所以在水平方向上出现滚动，通常不希望如此。
  9.      因此 - 因为<section>默认情况下是块级元素，我注释掉了宽度，
  10.      在这种情况下，浏览器将分配填充，然后使用剩余空间作为元素的大小。
  11.   width: 100%;
  12.   */
  13.   height: 120%;
  14.   background-color: #3c6382;
  15. }
  17. #projects h2 {
  18.   text-align: center;
  19.   text-decoration: underline;
  20.   color: #c8d6e5;
  21.   font-size: 2rem;
  22. }
  24. .img {
  25.   margin-top: 4rem;
  26.   width: 40%;
  27.   border: 0.5rem solid white;
  28. }
  30. .project-title {
  31.   color: white;
  32.   font-size: 1.5rem;
  33.   margin-left: 4rem;
  34. }
  36. #projects-grid {
  37.   display: grid;
  38.   /* 我已更正以下一行中的拼写错误，“autofit”应为
  39.      “auto-fit”，如下所示。如果您使用浏览器的开发工具
  40.      （右键单击元素，选择“检查元素”并查看
  41.      CSS属性，您会看到“无效值”，应该指向正确的解决方向：*/
  42.   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  43. }
  1. <section id='projects'>
  2.   <h2>这是我的一些项目：</h2>
  3.   <div id="projects-grid">
  4.     <a href="#">
  5.       <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img">
  6.       <!-- 我删除了</image>标签，原因有两个：
  7.            1. <img>元素没有或不需要结束标签
  8.            2. 如果需要结束标签，它需要与开始标签相同，但以
  9.               '/'字符作为第一个字符，例如：<img>（但不要使用它，因为不需要结束标签
  10.               该元素是空的，不包含子元素） -->
  11.       <p class='project-title'>致敬页面</p>
  12.     </a>
  13.     <a href="#">
  14.       <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img">
  15.       <p class='project-title'>致敬页面</p>
  16.     </a>
  17.     <a href="#">
  18.       <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img">
  19.       <p class='project-title'>致敬页面</p>
  20.     </a>
  21.     <a href="#">
  22.       <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img">
  23.       <p class='project-title'>致敬页面</p>
  24.     </a>
  25.     <a href="#">
  26.       <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img">
  27.       <p class='project-title'>致敬页面</p>
  28.     </a>
  29.     <a href="#">
  30.       <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img">
  31.       <p class='project-title'>致敬页面</p>
  32.     </a>
  33.   </div>
  34.   <!-- 我注释掉了以下多余的</div>标签，未配对 -->
  35. </section>
英文:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. #projects {
  2.   padding: 3rem 2rem;
  3.   /* the width of most elements (by default) is
  4.      the declared width plus the border-widths
  5.      and the padding; this means the width of
  6.      this element is calculated to be:
  7.        100% of the parent&#39;s width, plus 4rem
  8.        (2rem for each side)
  9.      as it&#39;s 100% + 4rem there&#39;s scrolling in
  10.      the horizontal direction which is not usually
  11.      desired. As such - because a &lt;section&gt; is a
  12.      block element by default I&#39;ve commented out
  13.      the width, in which case the browser will
  14.      assign the padding and then use the remaining
  15.      space as the element&#39;s size.
  16.   width: 100%;
  17.   */
  18.   height: 120%;
  19.   background-color: #3c6382;
  20. }
  22. #projects h2 {
  23.   text-align: center;
  24.   text-decoration: underline;
  25.   color: #c8d6e5;
  26.   font-size: 2rem;
  27. }
  29. .img {
  30.   margin-top: 4rem;
  31.   width: 40%;
  32.   border: 0.5rem solid white;
  33. }
  35. .project-title {
  36.   color: white;
  37.   font-size: 1.5rem;
  38.   margin-left: 4rem;
  39. }
  41. #projects-grid {
  42.   display: grid;
  43.   /* I corrected the typo in the following line &quot;autofit&quot; should be
  44.      &quot;auto-fit,&quot; as below. Had you used your browser&#39;s developer tools
  45.      (right click the element, &quot;inspect element&quot; and looked in the
  46.      CSS properties you&#39;d have seen &quot;invalid value&quot; which should have
  47.      pointed you the correct direction to resolve the issue: */
  48.   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  49. }

<!-- language: lang-html -->

  1. &lt;section id=&#39;projects&#39;&gt;
  2.   &lt;h2&gt;Here are some of my Projects:&lt;/h2&gt;
  3.   &lt;div id=&quot;projects-grid&quot;&gt;
  4.     &lt;a href=&quot;#&quot;&gt;
  5.       &lt;img src=&quot;https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440&quot; class=&quot;img&quot;&gt;
  6.       &lt;!-- I removed the &lt;/image&gt; tags, for two reasons:
  7.            1. the &lt;img&gt; element doesn&#39;t have, or require, a closing tag, and
  8.            2. if it did it would require that closing tag to be the same as the openening tag, but with
  9.               a &#39;/&#39; character as the first character, for example: `&lt;/img&gt;` (but don&#39;t use that, no closing tag
  10.               is required as the element is void and contains no children) --&gt;
  11.       &lt;p class=&#39;project-title&#39;&gt;Tribute page&lt;/p&gt;
  12.     &lt;/a&gt;
  13.     &lt;a href=&quot;#&quot;&gt;
  14.       &lt;img src=&quot;https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440&quot; class=&quot;img&quot;&gt;
  15.       &lt;p class=&#39;project-title&#39;&gt;Tribute page&lt;/p&gt;
  16.     &lt;/a&gt;
  17.     &lt;a href=&quot;#&quot;&gt;
  18.       &lt;img src=&quot;https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440&quot; class=&quot;img&quot;&gt;
  19.       &lt;p class=&#39;project-title&#39;&gt;Tribute page&lt;/p&gt;
  20.     &lt;/a&gt;
  21.     &lt;a href=&quot;#&quot;&gt;
  22.       &lt;img src=&quot;https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440&quot; class=&quot;img&quot;&gt;
  23.       &lt;p class=&#39;project-title&#39;&gt;Tribute page&lt;/p&gt;
  24.     &lt;/a&gt;
  25.     &lt;a href=&quot;#&quot;&gt;
  26.       &lt;img src=&quot;https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440&quot; class=&quot;img&quot;&gt;
  27.       &lt;p class=&#39;project-title&#39;&gt;Tribute page&lt;/p&gt;
  28.     &lt;/a&gt;
  29.     &lt;a href=&quot;#&quot;&gt;
  30.       &lt;img src=&quot;https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440&quot; class=&quot;img&quot;&gt;
  31.       &lt;p class=&#39;project-title&#39;&gt;Tribute page&lt;/p&gt;
  32.     &lt;/a&gt;
  33.   &lt;/div&gt;
  34.   &lt;!-- I commented out the following surplus &lt;/div&gt; tag that was unmatched --&gt;
  35. &lt;/section&gt;

<!-- end snippet -->

References:

huangapple
  • 本文由 发表于 2023年5月7日 17:26:14
  • 转载请务必保留本文链接：https://go.coder-hub.com/76193083.html
  • css
  • css-grid
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定