Create accountLogin

Recent searches

No recent searches

Search options

Only available when logged in.
mastodon.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
The original server operated by the Mastodon gGmbH non-profit

Administered by:

Server stats:

352K
active users

mastodon.social: AboutStatusProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.4.0-nightly.2025-03-25

#cssflexbox

1 post1 participant0 posts today
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="tag">#<span>Development</span></a> <a href="https://mastodon.social/tags/Proposals" class="mention hashtag" rel="tag">#<span>Proposals</span></a><br />Item Flow (part 1) · A new CSS layout concept uniting Grid, Flexbox, and Masonry <a href="https://ilo.im/1631o0" target="_blank" rel="nofollow noopener" translate="no"><span class="invisible">https://</span><span class="">ilo.im/1631o0</span><span class="invisible"></span></a></p><p>_____<br /><a href="https://mastodon.social/tags/Concept" class="mention hashtag" rel="tag">#<span>Concept</span></a> <a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="tag">#<span>Layout</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="tag">#<span>CSS</span></a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="tag">#<span>CssGrid</span></a> <a href="https://mastodon.social/tags/CssFlexbox" class="mention hashtag" rel="tag">#<span>CssFlexbox</span></a> <a href="https://mastodon.social/tags/Masonry" class="mention hashtag" rel="tag">#<span>Masonry</span></a> <a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="tag">#<span>Design</span></a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="tag">#<span>WebDesign</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="tag">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="tag">#<span>Frontend</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="tag">#<span>Development</span></a> <a href="https://mastodon.social/tags/Proposals" class="mention hashtag" rel="tag">#<span>Proposals</span></a><br />CSS self gap · Custom gaps between some ‘flex’ or ‘grid’ items <a href="https://ilo.im/162wa9" target="_blank" rel="nofollow noopener" translate="no"><span class="invisible">https://</span><span class="">ilo.im/162wa9</span><span class="invisible"></span></a></p><p>_____<br /><a href="https://mastodon.social/tags/Spacing" class="mention hashtag" rel="tag">#<span>Spacing</span></a> <a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="tag">#<span>Layout</span></a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="tag">#<span>CssGrid</span></a> <a href="https://mastodon.social/tags/CssFlexbox" class="mention hashtag" rel="tag">#<span>CssFlexbox</span></a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="tag">#<span>Browser</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="tag">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="tag">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="tag">#<span>CSS</span></a></p>
Ana Tudor 🐯<p>Flexy flex layout for any number n of items such that we have:</p><p>👉 at most 3 items on a row<br />👉 at least 2 items on a row IF we have at least 2 items in total</p><p>In only 5 (display, flex-wrap, gap, flex and flex-basis override) CSS declarations, working for any number n of items! 🎇</p><p>Because someone asked for this on reddit <a href="https://www.reddit.com/r/css/comments/1jayx5v/comment/mhq2ldw/" target="_blank" rel="nofollow noopener" translate="no"><span class="invisible">https://www.</span><span class="ellipsis">reddit.com/r/css/comments/1jay</span><span class="invisible">x5v/comment/mhq2ldw/</span></a></p><p>Here is the <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention">@<span>codepen</span></a></span> demo <a href="https://codepen.io/thebabydino/pen/OPJOepJ" target="_blank" rel="nofollow noopener" translate="no"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/OPJ</span><span class="invisible">OepJ</span></a></p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="tag">#<span>CSS</span></a> <a href="https://mastodon.social/tags/flexbox" class="mention hashtag" rel="tag">#<span>flexbox</span></a> <a href="https://mastodon.social/tags/layout" class="mention hashtag" rel="tag">#<span>layout</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="tag">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/cssFlexbox" class="mention hashtag" rel="tag">#<span>cssFlexbox</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="tag">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="tag">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="tag">#<span>frontend</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="tag">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="tag">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="tag">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="tag">#<span>webDevelopment</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="tag">#<span>Development</span></a> <a href="https://mastodon.social/tags/Misconceptions" class="mention hashtag" rel="tag">#<span>Misconceptions</span></a><br />A meme for the wrong reasons · Centering in CSS used to be hard, but now it’s easy <a href="https://ilo.im/1628ep" target="_blank" rel="nofollow noopener" translate="no"><span class="invisible">https://</span><span class="">ilo.im/1628ep</span><span class="invisible"></span></a></p><p>_____<br /><a href="https://mastodon.social/tags/ModernCSS" class="mention hashtag" rel="tag">#<span>ModernCSS</span></a> <a href="https://mastodon.social/tags/Memes" class="mention hashtag" rel="tag">#<span>Memes</span></a> <a href="https://mastodon.social/tags/Centering" class="mention hashtag" rel="tag">#<span>Centering</span></a> <a href="https://mastodon.social/tags/Positioning" class="mention hashtag" rel="tag">#<span>Positioning</span></a> <a href="https://mastodon.social/tags/Alignment" class="mention hashtag" rel="tag">#<span>Alignment</span></a> <a href="https://mastodon.social/tags/CssFlexbox" class="mention hashtag" rel="tag">#<span>CssFlexbox</span></a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="tag">#<span>CssGrid</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="tag">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="tag">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="tag">#<span>CSS</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="tag">#<span>Development</span></a> <a href="https://mastodon.social/tags/Fun" class="mention hashtag" rel="tag">#<span>Fun</span></a><br />CSS lessons for your parking fails · Proper car positioning may be easier than you think <a href="https://ilo.im/161t84" target="_blank" rel="nofollow noopener" translate="no"><span class="invisible">https://</span><span class="">ilo.im/161t84</span><span class="invisible"></span></a></p><p>_____<br /><a href="https://mastodon.social/tags/Positioning" class="mention hashtag" rel="tag">#<span>Positioning</span></a> <a href="https://mastodon.social/tags/Spacing" class="mention hashtag" rel="tag">#<span>Spacing</span></a> <a href="https://mastodon.social/tags/CssFloat" class="mention hashtag" rel="tag">#<span>CssFloat</span></a> <a href="https://mastodon.social/tags/CssTransform" class="mention hashtag" rel="tag">#<span>CssTransform</span></a> <a href="https://mastodon.social/tags/CssFlexbox" class="mention hashtag" rel="tag">#<span>CssFlexbox</span></a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="tag">#<span>CssGrid</span></a> <a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="tag">#<span>Development</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="tag">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="tag">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="tag">#<span>CSS</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="tag">#<span>Development</span></a> <a href="https://mastodon.social/tags/Approaches" class="mention hashtag" rel="tag">#<span>Approaches</span></a><br />Simple masonry-like composable layout · A CSS interim solution until browsers catch up <a href="https://ilo.im/161qo0" target="_blank" rel="nofollow noopener" translate="no"><span class="invisible">https://</span><span class="">ilo.im/161qo0</span><span class="invisible"></span></a></p><p>_____<br /><a href="https://mastodon.social/tags/Masonry" class="mention hashtag" rel="tag">#<span>Masonry</span></a> <a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="tag">#<span>Layout</span></a> <a href="https://mastodon.social/tags/CssFlexbox" class="mention hashtag" rel="tag">#<span>CssFlexbox</span></a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="tag">#<span>CssGrid</span></a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="tag">#<span>Browser</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="tag">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="tag">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="tag">#<span>HTML</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="tag">#<span>CSS</span></a></p>
Aaron In Minnesota<p>as a midwesterner you&#39;re supposed to know the difference between a tornado-watch and a tornado-warning, but in practice many people have a &quot;I can&#39;t remember which is which and I never will&quot; mentality. </p><p>If you feel the same about <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="tag">#<span>CSS</span></a> flexbox `align-content` and `align-items`, maybe this cheat-sheet is for you</p><p><a href="https://css-tricks.com/wp-content/uploads/2022/02/css-flexbox-poster.png" target="_blank" rel="nofollow noopener" translate="no"><span class="invisible">https://</span><span class="ellipsis">css-tricks.com/wp-content/uplo</span><span class="invisible">ads/2022/02/css-flexbox-poster.png</span></a></p><p><a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="tag">#<span>webDev</span></a> <a href="https://mastodon.social/tags/CssFlexbox" class="mention hashtag" rel="tag">#<span>CssFlexbox</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="tag">#<span>Development</span></a> <a href="https://mastodon.social/tags/Debates" class="mention hashtag" rel="tag">#<span>Debates</span></a><br />Help us choose the final CSS Masonry syntax · Get the latest updates and share your feedback <a href="https://ilo.im/160id2" target="_blank" rel="nofollow noopener" translate="no"><span class="invisible">https://</span><span class="">ilo.im/160id2</span><span class="invisible"></span></a></p><p>______<br /><a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="tag">#<span>Layout</span></a> <a href="https://mastodon.social/tags/Masonry" class="mention hashtag" rel="tag">#<span>Masonry</span></a> <a href="https://mastodon.social/tags/CSSWG" class="mention hashtag" rel="tag">#<span>CSSWG</span></a> <a href="https://mastodon.social/tags/Specification" class="mention hashtag" rel="tag">#<span>Specification</span></a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="tag">#<span>WebDesign</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="tag">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="tag">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="tag">#<span>CSS</span></a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="tag">#<span>CssGrid</span></a> <a href="https://mastodon.social/tags/CssFlexbox" class="mention hashtag" rel="tag">#<span>CssFlexbox</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="tag">#<span>Development</span></a> <a href="https://mastodon.social/tags/Opportunities" class="mention hashtag" rel="tag">#<span>Opportunities</span></a><br />‘Smart’ CSS layouts with container queries · New options we never had with media queries <a href="https://ilo.im/15zshu" target="_blank" rel="nofollow noopener" translate="no"><span class="invisible">https://</span><span class="">ilo.im/15zshu</span><span class="invisible"></span></a></p><p>_____<br /><a href="https://mastodon.social/tags/ModernCSS" class="mention hashtag" rel="tag">#<span>ModernCSS</span></a> <a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="tag">#<span>Layout</span></a> <a href="https://mastodon.social/tags/ContainerQuery" class="mention hashtag" rel="tag">#<span>ContainerQuery</span></a> <a href="https://mastodon.social/tags/MediaQuery" class="mention hashtag" rel="tag">#<span>MediaQuery</span></a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="tag">#<span>CssGrid</span></a> <a href="https://mastodon.social/tags/CssFlexbox" class="mention hashtag" rel="tag">#<span>CssFlexbox</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="tag">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="tag">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="tag">#<span>CSS</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="tag">#<span>Development</span></a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="tag">#<span>Techniques</span></a><br />Getting stuck · All the ways CSS ‘position: sticky’ can fail <a href="https://ilo.im/15zi7o" target="_blank" rel="nofollow noopener" translate="no"><span class="invisible">https://</span><span class="">ilo.im/15zi7o</span><span class="invisible"></span></a></p><p>_____<br /><a href="https://mastodon.social/tags/Header" class="mention hashtag" rel="tag">#<span>Header</span></a> <a href="https://mastodon.social/tags/Sidebar" class="mention hashtag" rel="tag">#<span>Sidebar</span></a> <a href="https://mastodon.social/tags/Scrolling" class="mention hashtag" rel="tag">#<span>Scrolling</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="tag">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="tag">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="tag">#<span>CSS</span></a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="tag">#<span>CssGrid</span></a> <a href="https://mastodon.social/tags/CssFlexbox" class="mention hashtag" rel="tag">#<span>CssFlexbox</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="tag">#<span>Development</span></a> <a href="https://mastodon.social/tags/Approaches" class="mention hashtag" rel="tag">#<span>Approaches</span></a><br />Learn CSS grid now, container queries can wait · “Take your time with new CSS, but don’t sleep on the essentials.” <a href="https://ilo.im/15z72q" target="_blank" rel="nofollow noopener" translate="no"><span class="invisible">https://</span><span class="">ilo.im/15z72q</span><span class="invisible"></span></a></p><p>_____<br /><a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="tag">#<span>Layout</span></a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="tag">#<span>Browser</span></a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="tag">#<span>CssGrid</span></a> <a href="https://mastodon.social/tags/CssFlexbox" class="mention hashtag" rel="tag">#<span>CssFlexbox</span></a> <a href="https://mastodon.social/tags/ContainerQuery" class="mention hashtag" rel="tag">#<span>ContainerQuery</span></a> <a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="tag">#<span>Design</span></a> <a href="https://mastodon.social/tags/ResponsiveDesign" class="mention hashtag" rel="tag">#<span>ResponsiveDesign</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="tag">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="tag">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="tag">#<span>CSS</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="tag">#<span>Development</span></a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="tag">#<span>Techniques</span></a><br />The gap · How CSS ‘gap’ can fix annoying spacing issues <a href="https://ilo.im/15z26r" target="_blank" rel="nofollow noopener" translate="no"><span class="invisible">https://</span><span class="">ilo.im/15z26r</span><span class="invisible"></span></a></p><p>_____<br /><a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="tag">#<span>Layout</span></a> <a href="https://mastodon.social/tags/Spacing" class="mention hashtag" rel="tag">#<span>Spacing</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="tag">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="tag">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="tag">#<span>CSS</span></a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="tag">#<span>CssGrid</span></a> <a href="https://mastodon.social/tags/CssFlexbox" class="mention hashtag" rel="tag">#<span>CssFlexbox</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="tag">#<span>Development</span></a> <a href="https://mastodon.social/tags/Approaches" class="mention hashtag" rel="tag">#<span>Approaches</span></a><br />Modern CSS layouts · You might not need a framework for that <a href="https://ilo.im/15yynz" target="_blank" rel="nofollow noopener" translate="no"><span class="invisible">https://</span><span class="">ilo.im/15yynz</span><span class="invisible"></span></a></p><p>_____<br /><a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="tag">#<span>Layout</span></a> <a href="https://mastodon.social/tags/Framework" class="mention hashtag" rel="tag">#<span>Framework</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="tag">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="tag">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="tag">#<span>CSS</span></a> <a href="https://mastodon.social/tags/UtilityClass" class="mention hashtag" rel="tag">#<span>UtilityClass</span></a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="tag">#<span>CssGrid</span></a> <a href="https://mastodon.social/tags/CssFlexbox" class="mention hashtag" rel="tag">#<span>CssFlexbox</span></a> <a href="https://mastodon.social/tags/CustomProperty" class="mention hashtag" rel="tag">#<span>CustomProperty</span></a> <a href="https://mastodon.social/tags/CssCalc" class="mention hashtag" rel="tag">#<span>CssCalc</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="tag">#<span>Development</span></a> <a href="https://mastodon.social/tags/Guides" class="mention hashtag" rel="tag">#<span>Guides</span></a><br />How to center a div · An interactive guide to modern CSS centering techniques <a href="https://ilo.im/15xyxw" target="_blank" rel="nofollow noopener" translate="no"><span class="invisible">https://</span><span class="">ilo.im/15xyxw</span><span class="invisible"></span></a></p><p>_____<br /><a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="tag">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="tag">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="tag">#<span>HTML</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="tag">#<span>CSS</span></a> <a href="https://mastodon.social/tags/CssFlexbox" class="mention hashtag" rel="tag">#<span>CssFlexbox</span></a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="tag">#<span>CssGrid</span></a> <a href="https://mastodon.social/tags/ModernCSS" class="mention hashtag" rel="tag">#<span>ModernCSS</span></a></p>
Ana Tudor 🐯<p><a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="tag">#<span>tinyCSStip</span></a> Ever find yourself wishing an element was `inline` in relation to its parent, but act as a `flex` container for its content?</p><p>Hit that yet again and remembered about the multi-value `display` - hmm, has support improved? </p><p>It has! It now works cross-browser! 🥳🎇</p><p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display" target="_blank" rel="nofollow noopener" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/do</span><span class="invisible">cs/Web/CSS/display</span></a></p><p><a href="https://mastodon.social/tags/layout" class="mention hashtag" rel="tag">#<span>layout</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="tag">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/flexbox" class="mention hashtag" rel="tag">#<span>flexbox</span></a> <a href="https://mastodon.social/tags/cssFlexbox" class="mention hashtag" rel="tag">#<span>cssFlexbox</span></a> <a href="https://mastodon.social/tags/inline" class="mention hashtag" rel="tag">#<span>inline</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="tag">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="tag">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="tag">#<span>frontend</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="tag">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="tag">#<span>webDevelopment</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="tag">#<span>Development</span></a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="tag">#<span>Techniques</span></a><br />(Don’t) mind the gap · “The CSS Flexbox ‘gap’ property is pretty cool.” <a href="https://ilo.im/15g8z7" target="_blank" rel="nofollow noopener" translate="no"><span class="invisible">https://</span><span class="">ilo.im/15g8z7</span><span class="invisible"></span></a></p><p>_____<br /><a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="tag">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="tag">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="tag">#<span>CSS</span></a> <a href="https://mastodon.social/tags/CssFlexbox" class="mention hashtag" rel="tag">#<span>CssFlexbox</span></a></p>
Public
:ms_awoo: Werewolf Kat​ ⌨️​🎨​

No matter how much I've tried working with CSS Grids, they never feel as nice as Flexboxes for me.
(I know they have different purposes, too. I'm trying!)

Like yeah, I could specify the points all these elements go into for smaller pieces of a site (like in a card). But to build a grid for the entire page and contents? Doesn't jive with me.

Is there some magic trick I'm missing to make Grids more intuitive and dynamic if they're used in a larger scale? There's a lot of tedium to them.
#webdev #css #css3 #cssgrid #cssflexbox

ExploreLive feeds
About