如何使用 2 列中的第一项制作响应式网格？

Question

Consider this snippet:考虑这个片段：

 <html> <head> <style type="text/css">.container { display: grid; grid-template-columns: auto auto auto auto; grid-column-gap: 10px; grid-row-gap: 10px; background-color: #aaaaaa; padding: 10px; }.item { padding: 40px; font-size: 30px; text-align: center; } </style> </head> <body> <div class="container"> <div><img src="https://via.placeholder.com/200x100"></div> <div><img src="https://via.placeholder.com/200x100"></div> <div><img src="https://via.placeholder.com/200x100"></div> <div><img src="https://via.placeholder.com/200x100"></div> <div><img src="https://via.placeholder.com/200x100"></div> <div><img src="https://via.placeholder.com/200x100"></div> <div><img src="https://via.placeholder.com/200x100"></div> </div> </body> </html>

I'm on my way to learn the css&html basics and I'm trying to achieve the next effect:我正在学习 css&html 基础知识，我正在努力实现下一个效果：

I'd like the first item on the grid to live in 2 "columns".我希望网格上的第一个项目存在于 2 个“列”中。 This item should be a box containing both text, links and some nice border (obviously the text shouldn't go out out of margins)这个项目应该是一个包含文本、链接和一些漂亮边框的框（显然文本不应该超出边距）
The whole grid should become responsive... so when you make the page smaller the number of columns will be reduced but never will be smaller than 2 columns, that way you'll be able to see the 1st item (which contains the whole description)整个网格应该变得响应......所以当你缩小页面时，列数会减少，但永远不会小于 2 列，这样你就可以看到第一项（其中包含整个描述)

How would you code this type of layout?你将如何编码这种类型的布局？

Answer 1

Hope this will clarifie you some grid behaviors.希望这可以澄清一些grid行为。 More about grid basics更多关于网格基础知识

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

grid-area (i used in this example) grid-area （我在这个例子中使用）

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area

grid-auto-rows and minmax(); grid-auto-rows和minmax();

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows

 <html> <head> <style type="text/css">.container { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 time by 1fr (equal share of a grid)*/ grid-auto-rows: minmax(100px, auto); /* minmax(100px, auto) tracks the row content height and set valu (from, to) */ grid-column-gap: 10px; grid-row-gap: 10px; background-color: #aaaaaa; padding: 10px; }.container.item { background: #fff; font-size: 0; /* removing white blank line under an image*/ }.container.item:nth-child(1) { grid-area: 1 / 1 / 2 / 3; /* first horizontal gap / first vertical gap / second horisontal gap / third vertical gap */ } /* here ve have to cover our text so we can set font-size back to normal*/.container.item.text-cover { padding: 40px; margin: 0; text-align: center; font-size: 14px; /* back font-size back from 0 */ } /* we have to set max-width: 100%; to an img so it will not tear the parent */.container.item img { /*max-width: 100%;*/ width: 100%; /* if we want image to be more thet its's max-width */ height: auto; font-size: 0; } /*act differently after screen width less then 575px*/ @media (max-width:575px) {.container { grid-template-columns: repeat(2, 1fr); } } </style> </head> <body> <div class="container"> <div class="item"> <div class="text-cover"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure <a href="#">dolor</a> in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <div class="item"> <div class="text-cover"> Removed image from here for you to see, how minmax(100px, auto) works </div> </div> <div class="item"><img src="https://via.placeholder.com/200x200"></div> <div class="item"><img src="https://via.placeholder.com/200x200"></div> <div class="item"><img src="https://via.placeholder.com/200x200"></div> <div class="item"><img src="https://via.placeholder.com/200x200"></div> <div class="item"><img src="https://via.placeholder.com/200x200"></div> </div> </body> </html>

如何使用 2 列中的第一项制作响应式网格？

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-05-21 23:20:45

如何使用 2 列中的第一项制作响应式网格？

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-05-21 23:20:45

解决方案1
2 已采纳 2020-05-21 23:20:45