CSS网格布局用于1个大图像和3个小图像。

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

CSS Grid layout for 1 large image and 3 small

问题

我试图重新排列这段代码，以获得像屏幕截图一样的网格视图。

我需要第一张图片占据整个宽度的100%，然后第二行需要3张等宽的图片排列在下方。

DEMO:
http://jsfiddle.net/gycmp21k/

  1. body {
  2.   padding: 40px;
  3. }
  5. * {
  6.   margin: 0px;
  7.   padding: 0px;
  8. }
  10. ul {
  11.   list-style: none;
  12.   display: grid;
  13.   grid-template-columns: 2fr 1fr 1fr;
  14.   grid-template-rows: 1fr 1fr;
  15.   gap: 1rem;
  16. }
  18. li:first-child {
  19.   grid-row: span 2;
  20. }
  22. img {
  23.   display: block;
  24.   width: 100%;
  25.   height: 100%;
  26.   object-fit: cover;
  27. }
  1. <ul>
  2.   <li>
  3.     <img src="https://via.placeholder.com/400" />
  4.   </li>
  5.   <li>
  6.     <img src="https://via.placeholder.com/400" />
  7.   </li>
  8.   <li>
  9.     <img src="https://via.placeholder.com/400" />
  10.   </li>
  11.   <li>
  12.     <img src="https://via.placeholder.com/400" />
  13.   </li>
  14. </ul>

CSS网格布局用于1个大图像和3个小图像。

英文:

I'm trying to rearrange this code to get this grid view like the screenshot.

I need the first image in the row to be full width 100%, then the second row I need 3 images of equal width in a row underneath.

CSS网格布局用于1个大图像和3个小图像。

DEMO:
http://jsfiddle.net/gycmp21k/

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

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

  1. body {
  2.   padding: 40px;
  3. }
  5. * {
  6.   margin: 0px;
  7.   padding: 0px;
  8. }
  10. ul {
  11.   list-style: none;
  12.   display: grid;
  13.   grid-template-columns: 2fr 1fr 1fr;
  14.   grid-template-rows: 1fr 1fr;
  15.   gap: 1rem;
  16. }
  18. li:first-child {
  19.   grid-row: span 2;
  20. }
  22. img {
  23.   display: block;
  24.   width: 100%;
  25.   height: 100%;
  26.   object-fit: cover;
  27. }

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

  1. &lt;ul&gt;
  2.   &lt;li&gt;
  3.     &lt;img src=&quot;https://via.placeholder.com/400&quot; /&gt;
  4.   &lt;/li&gt;
  5.   &lt;li&gt;
  6.     &lt;img src=&quot;https://via.placeholder.com/400&quot; /&gt;
  7.   &lt;/li&gt;
  8.   &lt;li&gt;
  9.     &lt;img src=&quot;https://via.placeholder.com/400&quot; /&gt;
  10.   &lt;/li&gt;
  11.   &lt;li&gt;
  12.     &lt;img src=&quot;https://via.placeholder.com/400&quot; /&gt;
  13.   &lt;/li&gt;
  14. &lt;/ul&gt;

<!-- end snippet -->

答案1

得分: 2

图片2、3和4在您的图片中具有相同的宽度，因此使它们具有相同的宽度。

grid-template-columns: 1fr 1fr 1fr;

图像1和图像2、3和4在您的图片中高度不相同，因此不要使它们具有相同的高度。

grid-template-rows: auto auto;

在您的图片中，图像1跨越多个列而不是多个行，并且它跨越了3列而不是2列。

grid-column: span 3;

英文:

Images 2, 3 and 4 are the same width in your picture, so make them the same width.

  1. grid-template-columns: 1fr 1fr 1fr;

Image 1 and images 2, 3 and 4 are not the same hight in your picture, so don't make them the same height:

  1. grid-template-rows: auto auto;

Image 1 spans across multiple columns not multiple rows in your picture, and it spans across 3 of them, not 2 of them

  1. grid-column: span 3;

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

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

  1. body {
  2.   padding: 40px;
  3. }
  5. * {
  6.   margin: 0px;
  7.   padding: 0px;
  8. }
  10. ul {
  11.   list-style: none;
  12.   display: grid;
  13.   grid-template-columns: 1fr 1fr 1fr;
  14.   grid-template-rows: auto auto;
  15.   gap: 1rem;
  16. }
  18. li:first-child {
  19.   grid-column: span 3;
  20. }
  22. img {
  23.   display: block;
  24.   width: 100%;
  25.   height: 100%;
  26.   object-fit: cover;
  27. }

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

  1. &lt;ul&gt;
  2.   &lt;li&gt;
  3.     &lt;img src=&quot;https://via.placeholder.com/400&quot; /&gt;
  4.   &lt;/li&gt;
  5.   &lt;li&gt;
  6.     &lt;img src=&quot;https://via.placeholder.com/400&quot; /&gt;
  7.   &lt;/li&gt;
  8.   &lt;li&gt;
  9.     &lt;img src=&quot;https://via.placeholder.com/400&quot; /&gt;
  10.   &lt;/li&gt;
  11.   &lt;li&gt;
  12.     &lt;img src=&quot;https://via.placeholder.com/400&quot; /&gt;
  13.   &lt;/li&gt;
  14. &lt;/ul&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月26日 20:36:46
  • 转载请务必保留本文链接：https://go.coder-hub.com/76556746.html
  • css
  • css-grid
  • html
  • sass
匿名

发表评论

匿名网友

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

确定