lingo.lol is one of the many independent Mastodon servers you can use to participate in the fediverse.
A place for linguists, philologists, and other lovers of languages.

Server stats:

62
active users

#subgrid

0 posts0 participants0 posts today
Ana Tudor 🐯<p>Help? 😟</p><p>Stupid <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a> question: why isn't my <a href="https://mastodon.social/tags/subgrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>subgrid</span></a> respected?</p><p><a href="https://codepen.io/thebabydino/pen/xbGeReB" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/xbG</span><span class="invisible">eReB</span></a></p><p><a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a></p>
Ana Tudor 🐯<p>Irregular shaped image with both convex &amp; concave roundings. Shape depends on other elements, how they scale/ wrap. Flexible layout depending on viewport.</p><p>Because someone asked how to<br><a href="https://www.reddit.com/r/css/comments/1k60u7w/comment/momcgkp/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">reddit.com/r/css/comments/1k60</span><span class="invisible">u7w/comment/momcgkp/</span></a></p><p>Live on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> <a href="https://codepen.io/thebabydino/pen/LEExpVg" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/LEE</span><span class="invisible">xpVg</span></a></p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/subgrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>subgrid</span></a> + <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> magic.</p><p><a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svgFilter</span></a> <a href="https://mastodon.social/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</span></a></p>
Luke Dorny<p>Found the solution, I think, to the overflowing at mobile sizes, it’s an additional `min()` inside the grid.<br><a href="https://youtu.be/aKFB5Bjk6KM?si=WWKt5tpzQIM3Atc1" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">youtu.be/aKFB5Bjk6KM?si=WWKt5t</span><span class="invisible">pzQIM3Atc1</span></a><br>@ min 18:00<br>Thanks, <span class="h-card" translate="no"><a href="https://front-end.social/@kevinpowell" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>kevinpowell</span></a></span> <a href="https://typo.social/tags/subgrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>subgrid</span></a> <a href="https://typo.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://typo.social/tags/CSSGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSGrid</span></a> <a href="https://typo.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a></p>
Luke Dorny<p>…And just to round out the scenario, it looks like some of the image alignment can be simplified using the recently supported <a href="https://typo.social/tags/subgrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>subgrid</span></a> of CSS (like four months ago!).</p><p><a href="https://youtu.be/IIQa9f0REtM?si=HbPECne0K63FGD1v&amp;t=261" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">youtu.be/IIQa9f0REtM?si=HbPECn</span><span class="invisible">e0K63FGD1v&amp;t=261</span></a></p><p><a href="https://typo.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://typo.social/tags/CSSGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSGrid</span></a> <a href="https://typo.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a></p>