TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

CSS Grid Areas

327 点作者 OuterVale9 个月前

23 条评论

CGamesPlay9 个月前
I was very intrigued by the animated demos, but apparently the animation is not accomplished with CSS :(<p>I definitely learned flexbox and thought to myself &quot;this is good enough&quot;, and haven&#x27;t really pushed myself to learn grids. It does seem like there&#x27;s some reason to prefer grid [0], but it overall I&#x27;ve never needed to do anything that can only be done with grid (except data tables, for which I use actual tables).<p>[0] <a href="https:&#x2F;&#x2F;css-tricks.com&#x2F;css-grid-replace-flexbox&#x2F;" rel="nofollow">https:&#x2F;&#x2F;css-tricks.com&#x2F;css-grid-replace-flexbox&#x2F;</a>
评论 #41263357 未加载
评论 #41264398 未加载
评论 #41264535 未加载
评论 #41264446 未加载
happytoexplain9 个月前
Wait, &#x27;1&#x2F;3&#x27; isn&#x27;t a fraction, it&#x27;s a range from 1 to 3? Why in God&#x27;s name would they choose that syntax? Ranges have plenty of reasonable, well known syntaxes in programming. E.g. 1..3
评论 #41265767 未加载
评论 #41266169 未加载
评论 #41271077 未加载
评论 #41265919 未加载
xp849 个月前
I haven&#x27;t been able to grasp either grid or flexbox. The last layout strategy I was decent at was floats. This article made me feel confident to use a css grid next time I am designing a layout. Well made! Thank you.
评论 #41263567 未加载
评论 #41264462 未加载
评论 #41265368 未加载
评论 #41263550 未加载
评论 #41263829 未加载
评论 #41264401 未加载
Alifatisk9 个月前
Related:<p>Grid Garden <a href="https:&#x2F;&#x2F;cssgridgarden.com" rel="nofollow">https:&#x2F;&#x2F;cssgridgarden.com</a><p>Flexbox Froggy <a href="https:&#x2F;&#x2F;flexboxfroggy.com" rel="nofollow">https:&#x2F;&#x2F;flexboxfroggy.com</a>
deskamess9 个月前
Is there a pre-intro version of this document? I am lost at the Introduction itself and not able to get past it. In particular:<p>&gt; If I need to position child items within the grid, I need to specify the line number for each item by using grid-column.<p>Stuck at what is &#x27;line number&#x27; in this context? I tried to force my way through it hoping context would fill it in but immediately got stuck at fractions like &#x27;1 &#x2F; 3&#x27; followed by &#x27;1 &#x2F; 4&#x27;.
评论 #41265422 未加载
评论 #41265433 未加载
talkingtab9 个月前
Highly recommended for CSS Grid is Jen Simmons Mondrian with auto flow. <a href="https:&#x2F;&#x2F;labs.jensimmons.com&#x2F;2017&#x2F;01-011.html" rel="nofollow">https:&#x2F;&#x2F;labs.jensimmons.com&#x2F;2017&#x2F;01-011.html</a>. Try &#x27;C&#x27; and &#x27;D&#x27; then change the window size. Also the youtube video that goes along <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=qNtJ5p3h2A4" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=qNtJ5p3h2A4</a>.<p>Just very cool.<p>The one thing about auto flow I wish I understood was how to detect, and fill, gaps. If I have some random collection of differently sized objects, how do I ensure that auto flow leaves no gaps? Or even detect that so I can add something?
tomw18089 个月前
I hope that&#x27;s not a stupid question, but why define the syntax as 1&#x2F;2 and 3&#x2F;4 (divider) and not 1-2 (column 1 _to_ column 2) and 3-4 or 1-&gt;2 or something like that?
评论 #41264366 未加载
评论 #41271097 未加载
kurtdev9 个月前
Wow, I just love interactive blog posts like this. For grids I can really recommend just playing around with grid areas in a tool like <a href="https:&#x2F;&#x2F;grid.layoutit.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;grid.layoutit.com&#x2F;</a><p>I&#x27;ve been using the site to plan my grid layouts for a couple of years now and it just makes spacing so much easier
written-beyond9 个月前
Might be the first time I&#x27;ve actually understood CSS grid. The numbering really helped!<p>Great article! Will be referencing it often.
评论 #41263466 未加载
djstein9 个月前
while I love CSS Grid and Areas I still think the hardest part is managing responsiveness especially between mobile and desktop sizes. I find that grid-template-area and the rows &#x2F; columns sizes needs to be updated via JavaScript based on what UI elements should be open &#x2F; full screen<p>I haven’t found a world where minmax or calc fixes this. hope someone has answers!
评论 #41263812 未加载
评论 #41265047 未加载
评论 #41266091 未加载
评论 #41265251 未加载
评论 #41264749 未加载
dalmo39 个月前
This is a fantastic article, and highlights both why grid is fantastic, and how its syntax (and, more generally, CSS syntax) is so annoying. Why there must be SO MANY ways to write the same thing?<p>There are two dimensions, and three parameters each - start, end, size. Then there are at least three ways to declare each parameter. And then... shorthand properties, what a mess.<p>I always find it very hard to read someone else&#x27;s grids. No matter how organised the dev is, the lack of an idiomatic way to write means there&#x27;s always a very high cognitive load for parsing.
评论 #41271728 未加载
tropicalfruit9 个月前
things like justify-content, align-content, align-items, align-self confuse me, they change based on block and inline settings and the naming is also too indistinct. in the end i just find it frustrating.<p>sometimes miss the days of table layouts.<p>i think flex and grid are fine if you stick to the basics. but when you start having nested elements and things like display: content. things can become unmanageable.
评论 #41263827 未加载
评论 #41264754 未加载
indiantinker9 个月前
Superb article. Things are so clear. MDN&#x2F;W3C should hire him to do this for many web concepts.
geenat9 个月前
Supplementary, by a CSS grid expert: <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=EashgVqboWo" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=EashgVqboWo</a>
robbiejs9 个月前
What a brilliant blog. Author puts a lot of love in it, that&#x27;s clear! Thanks for sharing, read the whole thing. Made me feel kinda stupid for not using CSS Grid more... ;-)
frereubu9 个月前
Does anyone know why the numbers are the gaps rather than the columns &#x2F; rows? It&#x27;s not exactly rocket science, but it took me a while to wrap my head around that, and it would have felt more intuitive for e.g. an item taking up the first two columns to be 1&#x2F;2 rather than 1&#x2F;3. I wonder if that&#x27;s something to do with being used to arrays starting at 0, and if it has to be columns then using 0&#x2F;2.
评论 #41268051 未加载
somishere9 个月前
Solid article! Important point I didn&#x27;t see covered &#x2F; worth noting with grid &amp; flex layouts is visual vs logical tab orders ... Looking forward to a solution in upcoming specs<p><a href="https:&#x2F;&#x2F;developer.chrome.com&#x2F;blog&#x2F;reading-flow-display-contents" rel="nofollow">https:&#x2F;&#x2F;developer.chrome.com&#x2F;blog&#x2F;reading-flow-display-conte...</a>
评论 #41263529 未加载
jdthedisciple9 个月前
Probably a cliché question at this point but<p>isn&#x27;t all of this solved more easily via flexbox?
评论 #41265226 未加载
评论 #41263889 未加载
评论 #41263931 未加载
评论 #41263873 未加载
评论 #41265789 未加载
评论 #41267593 未加载
lovegrenoble9 个月前
Would like a tool like the one made for flexbox (to streamline<p>the process of creating responsive layouts): <a href="https:&#x2F;&#x2F;flexboxcss.com" rel="nofollow">https:&#x2F;&#x2F;flexboxcss.com</a>
fourthark9 个月前
For the invalid example in 3.2, I think the last line intends to say &quot;sidebar&quot; not &quot;header&quot;. As it is, it&#x27;s both discontiguous and missing an area.
msie9 个月前
The guy fails to mention at the beginning what 1&#x2F;3, 3&#x2F;4 means.
zinglersen9 个月前
The interactive elements of the article made it click for me, the effort is much appreciated!
iamgopal9 个月前
Oh my God. What we have done ?
评论 #41264958 未加载
评论 #41265037 未加载