grid-template-column 未显示出来

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

grid-template-column not showing up

问题

Sure, here's the translated portion of your text:

为什么我的网格列不起作用？我正在制作这个圣诞匹配游戏项目，我正在尝试使用网格模板列来制作其他卡片列，但其他的3列没有显示出来。它们应该显示在“Time: 100”的旁边，但却没有显示出来。我已经检查了拼写和一切，但什么都不起作用。我漏掉了什么？

英文:

Why isn't my grid column working? I'm making this Christmas matching game project and I am trying to make the other card columns using grid template columns but the other 3 columns aren't showing up. They should show up right next to "Time: 100" but aren't. I've checked my spelling and everything yet nothing is working. What am I missing?

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <link href="style.css" rel="stylesheet">
  5. <title>Santa's Matching Game</title>
  7. </head>
  8. <body>
  10.     <h1 class="page-title">Santa's Matching Game</h1>
  11.     <!-- Game Stuff Besides Cards -->
  12.     <div class="game-container">
  13.         <div class="game-info-container">
  14.             <div class="game-info">
  15.                 Time: <span id="time-remaining">100</span>
  16.             </div>
  17.             <div class="game-info">
  18.                 Flips: <span id="flips">0</span>
  19.             </div>
  20.     <!-- Cards -->
  21.             <div class="card"></div>
  22.             <div class="card"></div>
  23.             <div class="card"></div>
  24.             <div class="card"></div>
  25.             <div class="card"></div>
  26.             <div class="card"></div>
  27.             <div class="card"></div>
  28.             <div class="card"></div>
  29.             <div class="card"></div>
  30.             <div class="card"></div>
  31.             <div class="card"></div>
  32.             <div class="card"></div>
  33.             <div class="card"></div>
  34.             <div class="card"></div>
  35.             <div class="card"></div>
  36.             <div class="card"></div>
  38.         </div>
  39.     </div>
  41. </body>  
  43. </html>
  1. @font-face {
  2.     font-family: "Dancing-Bold";
  3.     src: url("Assets/Fonts/Dancing-Bold.ttf") format('truetype');
  5. }
  8. @font-face {
  9.     font-family: "MofC-Bold";
  10.     src: url("Assets/Fonts/MofC-Bold.ttf") format('truetype');
  12. }
  15. * {
  16.     box-sizing: border-box;
  17. }
  20. html {
  21.     min-height: 100vh;
  22. }
  24. body {
  25.     margin: 0;
  26.     background: radial-gradient(#f2f3f8,#58b69b);
  27. }
  29. .page-title {
  30.     color:aliceblue;
  31.     font-family: MofC-Bold, serif;
  32.     font-weight: normal;
  33.     text-align: center;
  34.     font-size: 6em;
  35. }
  37. .game-info {
  38.     color: aliceblue;
  39.     font-size: 4em;
  40.     font-family: Dancing-Bold, serif;
  41. }
  43. .game-container {
  44.     display: grid;
  45.     grid-template-columns: repeat(4, auto);
  46.     grid-gap: 10px;
  47. }
  49. .card {
  50.     background-color: #d33943;
  51.     height: 175px;
  52.     width: 125px;
  53. }

Hopefully I did this right, I've never used Stack overflow before.

答案1

得分: 1

Grid与子元素配合使用，目前您的网格只有一个子元素game-info-container，请移除该元素，网格将正常工作。

  1. <h1 class="page-title">Santa's Matching Game</h1>
  2. <!-- 游戏信息除了卡片之外的内容 -->
  3. <div class="game-container">
  4.   <div class="game-info">
  5.     时间: <span id="time-remaining">100</span>
  6.   </div>
  7.   <div class="game-info">
  8.     翻牌数: <span id="flips">0</span>
  9.   </div>
  10.   <!-- 卡片 -->
  11.   <div class="card"></div>
  12.   <div class="card"></div>
  13.   <div class="card"></div>
  14.   <div class="card"></div>
  15.   <div class="card"></div>
  16.   <div class="card"></div>
  17.   <div class="card"></div>
  18.   <div class="card"></div>
  19.   <div class="card"></div>
  20.   <div class="card"></div>
  21.   <div class="card"></div>
  22.   <div class="card"></div>
  23.   <div class="card"></div>
  24.   <div class="card"></div>
  25.   <div class="card"></div>
  26.   <div class="card"></div>
  27. </div>

上述代码是要移除的game-info-container元素之后的网格和相关内容。

英文:

Grid works with child elements, currently your gird only has one child wich is game-info-container, remove that element and the grid will work

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

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

  1. @font-face {
  2.   font-family: &quot;Dancing-Bold&quot;;
  3.   src: url(&quot;Assets/Fonts/Dancing-Bold.ttf&quot;) format(&#39;truetype&#39;);
  5. }
  8. @font-face {
  9.   font-family: &quot;MofC-Bold&quot;;
  10.   src: url(&quot;Assets/Fonts/MofC-Bold.ttf&quot;) format(&#39;truetype&#39;);
  12. }
  15. * {
  16.   box-sizing: border-box;
  17. }
  20. html {
  21.   min-height: 100vh;
  22. }
  24. body {
  25.   margin: 0;
  26.   background: radial-gradient(#f2f3f8, #58b69b);
  27. }
  29. .page-title {
  30.   color: aliceblue;
  31.   font-family: MofC-Bold, serif;
  32.   font-weight: normal;
  33.   text-align: center;
  34.   font-size: 6em;
  35. }
  37. .game-info {
  38.   color: aliceblue;
  39.   font-size: 4em;
  40.   font-family: Dancing-Bold, serif;
  41. }
  43. .game-container {
  44.   display: grid;
  45.   grid-template-columns: repeat(4, auto);
  46.   grid-gap: 10px;
  47. }
  49. .card {
  50.   background-color: #d33943;
  51.   height: 175px;
  52.   width: 125px;
  53. }

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

  1. &lt;h1 class=&quot;page-title&quot;&gt;Santa&#39;s Matching Game&lt;/h1&gt;
  2. &lt;!-- Game Stuff Besides Cards --&gt;
  3. &lt;div class=&quot;game-container&quot;&gt;
  4.   &lt;div class=&quot;game-info&quot;&gt;
  5.     Time: &lt;span id=&quot;time-remaining&quot;&gt;100&lt;/span&gt;
  6.   &lt;/div&gt;
  7.   &lt;div class=&quot;game-info&quot;&gt;
  8.     Flips: &lt;span id=&quot;flips&quot;&gt;0&lt;/span&gt;
  9.   &lt;/div&gt;
  10.   &lt;!-- Cards --&gt;
  11.   &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;
  12.   &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;
  13.   &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;
  14.   &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;
  15.   &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;
  16.   &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;
  17.   &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;
  18.   &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;
  19.   &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;
  20.   &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;
  21.   &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;
  22.   &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;
  23.   &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;
  24.   &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;
  25.   &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;
  26.   &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;
  28. &lt;/div&gt;

<!-- end snippet -->

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

发表评论

匿名网友

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

确定