如何修复我的网格单元格大小？

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

How do I fix the sizing of my grid cells?

问题

我正在尝试复制这个网站 https://rickandmortyapi.com/，我正在使用网格布局使我的版本更具响应性。当我将grid-template-columns设置为repeat(auto-fit, minmax(589.19, 1fr))时，网格单元格会在水平方向延伸到页面的末尾，尽管我设置了minmax。我这样做的原因是要根据浏览器窗口的大小来改变每行的单元格数量。

  1. main {
  2.     display: grid;
  3.     grid-template-columns: repeat(auto-fit, minmax(589.19px, 1fr));
  4.     gap: 0;
  5.     overflow-x: hidden;
  6. }

这是您提供的CSS代码的一部分，用于设置网格布局，并解决了您的问题。如果需要进一步的翻译，请告诉我。

英文:

I'm trying to replicate this website https://rickandmortyapi.com/ I'm making my version more responsive by using grid layouts. When I set the grid-template-columns to repeat(auto-fit, minmax(589.19, 1fr)) the grid cells extend horizontally to the end of the page despite me setting the minmax. The reason I did this is to have the number of cells per row change depending on the size of the browser window.

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

<!-- language: lang-js -->

  1. const mainEl = document.querySelector(&quot;main&quot;);
  3. const main = async () =&gt; {
  4.   const characters = await fetchAllCharacters();
  5.   const maxCells = 6;
  7.   for (let i = 0; i &lt; Math.min(characters.length, maxCells); i++) {
  8.     const character = characters[i];
  9.     const episode = await fetchJsonAsync(character.episode[0]);
  10.     mainEl.insertAdjacentHTML(&#39;beforeend&#39;, renderCharacterHTML(character, episode));
  11.   }
  12. };
  14. const renderCharacterHTML = (character, episode) =&gt; `
  15.   &lt;article class=&quot;character-card&quot;&gt;
  16.     &lt;div class=&quot;image-container&quot;&gt;
  17.       &lt;img src=&quot;${character.image}&quot; alt=&quot;Character&quot; height=&quot;100%&quot; width=&quot;100%&quot;&gt;
  18.     &lt;/div&gt;
  19.     &lt;div class=&quot;character-info&quot;&gt;
  20.       &lt;div class=&quot;section&quot;&gt;
  21.         &lt;h2 class=&quot;orangefy&quot;&gt;${character.name}&lt;/h2&gt;
  22.         &lt;div class=&quot;status&quot;&gt;
  23.           &lt;span class=&quot;status-dot ${getStatusColor(character.status)}&quot;&gt;&lt;/span&gt;
  24.           &lt;span class=&quot;status&quot;&gt;${character.status} - ${character.species}&lt;/span&gt;
  25.         &lt;/div&gt;
  26.       &lt;/div&gt;
  27.       &lt;div class=&quot;section&quot;&gt;
  28.         &lt;span class=&quot;greytext&quot;&gt;Last known location:&lt;/span&gt;
  29.         &lt;span class=&quot;orangefy&quot;&gt;${character.location.name}&lt;/span&gt;
  30.       &lt;/div&gt;
  31.       &lt;div class=&quot;section&quot;&gt;
  32.         &lt;span class=&quot;greytext&quot;&gt;First seen in:&lt;/span&gt;
  33.         &lt;span class=&quot;orangefy&quot;&gt;${episode.name}&lt;/span&gt;
  34.       &lt;/div&gt;
  35.     &lt;/div&gt;
  36.   &lt;/article&gt;
  37. `;
  39. const getStatusColor = (status) =&gt; {
  40.   switch (status.toLowerCase()) {
  41.     case &#39;unknown&#39;:
  42.       return &#39;grey&#39;;
  43.     case &#39;dead&#39;:
  44.       return &#39;red&#39;;
  45.     case &#39;alive&#39;:
  46.       return &#39;green&#39;;
  47.     default:
  48.       return &#39;&#39;;
  49.   }
  50. };
  52. const fetchAllCharacters = async () =&gt; {
  53.   const response = await fetchJsonAsync(&#39;https://rickandmortyapi.com/api/character&#39;);
  54.   return response.results;
  55. };
  57. const fetchJsonAsync = async (url) =&gt; {
  58.   try {
  59.     let response = await fetch(url);
  60.     if (!response.ok) throw new Error(response.statusText);
  61.     return response.json();
  62.   } catch (err) {
  63.     console.error(&#39;Error fetching JSON:&#39;, err);
  64.   }
  65. };
  67. main();

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

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5.     font-family: system-ui, -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Oxygen, Ubuntu, Cantarell, &#39;Open Sans&#39;, &#39;Helvetica Neue&#39;, sans-serif;
  6. }
  8. .top-container{
  9.     position: relative;
  10.     height: 465px;
  11.     padding-bottom: 0;
  12. }
  14. .showcase {
  15.     background-color: rgb(39,43,51);
  17. }
  19. .showcase-inner {
  20.     margin: 0;
  21.     padding-top: 80px;
  22.     padding-bottom: 80px;
  23.     padding-left: 10px;
  24.     padding-right: 10px;
  25. }
  27. .footer { 
  28.     background-color: rgb(32,35,41);
  29.     padding-top: 50px;
  30.     padding-bottom: 21px;
  31. }
  33. h1{
  34.     font-size: 100px;
  35.     text-align: center;
  36.     font-weight: 1000;
  37.     color: rgb(32,35,41);
  38. }
  40. h2{
  41.     font-weight: 1000;
  42.     font-size: x-larges;
  43. }
  46. main {
  47.     display: grid;
  48.     grid-template-columns: repeat(auto-fit, minmax(589.19, 1fr));
  49.     gap: 0;
  50.     overflow-x: hidden;
  51. }
  53. .image-container{
  54.     display: flex;
  55. }
  57. .image-container img{
  58.     width: 229.2px;
  59.     height: 220px;
  60.     border-radius: 10px 0px 0px 10px;     
  61. }
  64. article{
  65.     margin-left: 5px;
  66.     margin-right: 5px;
  67. }
  70. .character-card{
  71.     display: flex;
  72.     margin: 13.5px;
  73.     background-color: rgb(60,62,68);
  74.     border-radius: 10px;
  75.     box-shadow: 0 0 10px rgba(37, 37, 37, 0.5);
  76. }
  78. .character-info{
  79.     display: flex;
  80.     flex-direction: column;
  81.     padding: 13.5px;
  82.     position: relative;
  83. }
  85. .section{
  86.     display: flex;
  87.     flex-direction: column;
  88.     width: 330px;
  89.     height: 64.33px;
  90.     color: rgb(245,245,245);
  91. }
  93. .greytext{
  94.     color: rgb(158,158,158);
  95.     padding-top: 5px;
  96.     padding-bottom: 10px;
  97. }
  99. .navbar {
  100.     background-color: #ffffff;
  101.     list-style-type: none;
  102.     margin: 0;
  103.     padding: 0;
  104.     overflow: hidden;
  105.     display: flex;
  106.     justify-content: space-between;
  107. }
  109. .navbar li {
  110.     float: left;
  111. }
  113. .navbar li a {
  114.     display: block;
  115.     color: #333;
  116.     text-align: center;
  117.     padding: 14px 16px;
  118.     text-decoration: none;
  119.     transition: color 0.2s;
  120. }
  122. .content-links{
  123.     margin-left: auto;
  124.     padding: 10px;
  125.     margin-right: 10px;
  126.     font-size: 20px;
  127.     font-weight: 750;
  128. }
  130. .content-links a:hover{
  131.     color: rgb(255,152,0);
  132. }
  134. .homebutton{
  135.     margin-right: auto;
  136. }
  138. .homebutton img{
  139.     width: 50px;
  140.     height: 50px;
  141. }
  143. .status {
  144.     display: flex;
  145.     align-items: center;
  146.     font-weight: 600;
  147. }
  149. .status-dot {
  150.     width: 8px;
  151.     height: 8px;
  152.     border-radius: 50%;
  153.     display: inline-block;
  154.     margin-right: 5px;
  155. }
  156.   
  157. .status-dot.grey {
  158.     background-color: rgb(158,158,158);
  159. }
  160.   
  161. .status-dot.red {
  162.     background-color: rgb(214,61,46);
  163. }
  164.   
  165. .status-dot.green {
  166.     background-color: rgb(85,204,68);
  167. }
  168.   
  169. .about-content{
  170.     display: flex;
  171.     flex-direction: column;
  172.     padding: 5px;
  173.     padding-bottom: 100px;
  174.     margin-left: 500px;
  175.     margin-right: 500px;
  176.     font-size: 110%;
  177.     color: rgb(66,66,66);
  178. }
  180. .abouth2 {
  181.     font-size: 35px;
  182.     font-weight: 800;
  183.     margin-bottom: 30px;
  184.     color: rgb(32,35,41);
  185. }
  187. .abouth3 {
  188.     font-size: 25px;
  189.     font-weight: 800;
  190.     margin-top: 10px;
  191.     margin-bottom: 10px;
  192.     color: rgb(32,35,41);
  193. }
  195. .ablink {
  196.     text-decoration-color: rgb(255,152,0);
  197.     text-decoration-thickness: 2px;
  198.     text-underline-offset: 4px;
  199.     color: rgb(66,66,66);
  200. }
  202. .ablink:hover {
  203.     text-decoration: none;
  204.     color: rgb(255,152,0);
  205.     transition: color 0.2s;
  206. }
  208. .footer-info {
  209.     display: flex;
  210.     justify-content: center;
  211.     list-style: none;
  212.     padding-top: 40px;
  213.     margin: 0;
  214.     font-size: 14px;
  215.     font-weight: 750;
  216.     color: rgb(158, 158, 158);
  217. }
  219. .footer-info li {
  220.     margin-right: 20px;
  221. }
  223. .socials {
  224.     display: flex;
  225.     justify-content: center;
  226.     align-items: center;
  227.     padding-top: 2px;
  228.     padding-bottom: 2px;
  229. }
  231. .socials a {
  232.     margin: 14px;
  233. }
  235. .socials a:hover svg path {
  236.     fill: rgb(255, 152, 0);
  237. }
  239. .sign {
  240.     color: rgb(158, 158, 158);
  241.     text-align: center;
  242.     font-size: 13px;
  243.     padding-top: 15px;
  244.     padding-bottom: 50px;
  245. }
  247. .footer-link {
  248.     color:rgb(255, 255, 255);
  249.     font-weight: 700;
  250.     text-decoration-color: rgb(255,152,0);
  251.     text-decoration-thickness: 2px;
  252.     text-underline-offset: 4px;
  254. }
  256. .footer-link:hover {
  257.     text-decoration: none;
  258.     color: rgb(255,152,0);
  259.     transition: color 0.2s;
  260. }
  262. .banner {
  263.     position: absolute;
  264.     left: 50%;
  265.     transform: translateX(-50%);
  266.     bottom: 0;
  267.   }
  268.   
  269.   .banner svg {
  270.     width: 480px; 
  271.     height: auto;
  272.   }
  274. .banner-text{
  275.     display: flex; 
  276.     justify-content: center;
  277.     align-items:center;
  278.     z-index: 10;
  279.     position: relative;
  280.     top: 150px;
  281.   }
  283. .poweredby {
  284.     display: flex;
  285.     justify-content: center;
  286.     align-items: center;
  287.     padding: 20px;
  288.     padding-top: 30px;
  289. }
  291. .poweredby-icon {
  292.     padding-left: 18px;
  293.     padding-right: 18px;
  294. }
  296. .server-status {
  297.     display: flex;
  298.     align-items: center;
  299.     text-justify: center;
  300.     justify-content: center;
  301.     font-weight: 700;
  302.     font-size: 14px;
  303.     padding-top: 10px;
  304. }
  306. .server-status-dot {
  307.     display: inline-block;
  308.     width: 9px;
  309.     height: 9px;
  310.     border-radius: 50%;
  311.     background-color: rgb(85,204,68);
  312.     margin-left: 10px;
  313. }
  315. .status-link {
  316.     text-decoration: none;
  317.     color: rgb(158, 158, 158);
  318. }
  320. .status-link:hover {
  321.     color: rgb(255,152,0);
  322.     transition: color 0.2s;
  323. }
  325. .orangefy:hover {
  326.     color: rgb(255,152,0);
  328. }

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

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3.     &lt;head&gt;
  4.         &lt;title&gt;Rick and Morty API&lt;/title&gt;
  5.         &lt;meta charset=&quot;UTF-8&quot;&gt;
  6.         &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  7.     &lt;/head&gt;
  9.     &lt;body&gt;
  10.         &lt;ul class=&quot;navbar&quot;&gt;
  11.             &lt;li class=&quot;homebutton&quot;&gt;&lt;a href=&quot;landing.html&quot;&gt;&lt;img src=&quot;RMAPI-homepagebutton.png&quot; alt=&quot;Home&quot;&gt;&lt;/a&gt;&lt;/li&gt;
  12.             &lt;li class=&quot;content-links&quot;&gt;&lt;a href=&quot;about.html&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
  13.         &lt;/ul&gt;
  14.         &lt;div class=&quot;top-container&quot;&gt;
  15.             &lt;h1 class=&quot;banner-text&quot;&gt;The Rick and Morty API&lt;/h1&gt;
  16.         &lt;/div&gt;
  17.         &lt;div class=&quot;showcase&quot;&gt;
  18.             &lt;div class=&quot;showcase-inner&quot;&gt;
  19.                 &lt;main&gt;&lt;/main&gt;
  20.             &lt;/div&gt;
  21.         &lt;/div&gt;
  22.         &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
  23.     &lt;/body&gt;
  24. &lt;/html&gt;

<!-- end snippet -->

答案1

得分: 1

I have checked your grid-template-columns CSS is not applying in the main tag.
I have tried and made some changes in CSS for the main class which is giving desired output.

main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(589px, 1fr));
gap: 0;
overflow-x: hidden;
}

May be It will help you... Thank you...!

英文:

here I have checked your grid-template-columns css is not applying in tag main.
I have tried and made some changes in css for main class which is giving desired output.

  1. main {
  2.     display: grid;
  3.     grid-template-columns: repeat(auto-fit, minmax(589px, 1fr));
  4.     gap: 0;
  5.     overflow-x: hidden;
  6. }

May be It will help you... Thank you...!

huangapple
  • 本文由 发表于 2023年6月13日 18:33:16
  • 转载请务必保留本文链接：https://go.coder-hub.com/76463993.html
  • css
  • html
  • javascript
匿名

发表评论

匿名网友

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

确定