#Development #Proposals
Item Flow (part 1) · A new CSS layout concept uniting Grid, Flexbox, and Masonry https://ilo.im/1631o0
_____
#Concept #Layout #CSS #CssGrid #CssFlexbox #Masonry #Design #WebDesign #WebDev #Frontend
Recent searches
Search options
#cssflexbox
0 posts0 participants0 posts today
#Development #Proposals
CSS self gap · Custom gaps between some ‘flex’ or ‘grid’ items https://ilo.im/162wa9
_____
#Spacing #Layout #CssGrid #CssFlexbox #Browser #WebDev #Frontend #CSS
ilo.imSelf Gap
More from 
Ahmad Shadeed
Flexy flex layout for any number n of items such that we have:
at most 3 items on a row at least 2 items on a row IF we have at least 2 items in total
In only 5 (display, flex-wrap, gap, flex and flex-basis override) CSS declarations, working for any number n of items! 
Because someone asked for this on reddit https://www.reddit.com/r/css/comments/1jayx5v/comment/mhq2ldw/
Here is the @codepen demo https://codepen.io/thebabydino/pen/OPJOepJ
#Development #Misconceptions
A meme for the wrong reasons · Centering in CSS used to be hard, but now it’s easy https://ilo.im/1628ep
_____
#ModernCSS #Memes #Centering #Positioning #Alignment #CssFlexbox #CssGrid #WebDev #Frontend #CSS
ilo.im- YouTubeEnjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
#Development #Fun
CSS lessons for your parking fails · Proper car positioning may be easier than you think https://ilo.im/161t84
_____
#Positioning #Spacing #CssFloat #CssTransform #CssFlexbox #CssGrid #Development #WebDev #Frontend #CSS
ilo.im- YouTubeEnjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
#Development #Approaches
Simple masonry-like composable layout · A CSS interim solution until browsers catch up https://ilo.im/161qo0
_____
#Masonry #Layout #CssFlexbox #CssGrid #Browser #WebDev #Frontend #HTML #CSS
PiccalilliA simple masonry-like composable layoutIt’s going to be a long time until CSS masonry is ready for us to use in our projects so I’ve got a nice stop-gap here for you that uses composable layouts.
#Development #Debates
Help us choose the final CSS Masonry syntax · Get the latest updates and share your feedback https://ilo.im/160id2
______
#Layout #Masonry #CSSWG #Specification #WebDesign #WebDev #Frontend #CSS #CssGrid #CssFlexbox
WebKit · Help us choose the final syntax for Masonry in CSSBack in April 2024, we wrote about “Masonry” layout in CSS and the ongoing work to bring this feature to browsers.
#Development #Opportunities
‘Smart’ CSS layouts with container queries · New options we never had with media queries https://ilo.im/15zshu
_____
#ModernCSS #Layout #ContainerQuery #MediaQuery #CssGrid #CssFlexbox #WebDev #Frontend #CSS
CSS-Tricks · “Smart” Layouts With Container Queries | CSS-TricksModern CSS keeps giving us a lot of new, easier ways to solve old problems, but often the new features we’re getting don’t only solve old problems, they open
#Development #Techniques
Getting stuck · All the ways CSS ‘position: sticky’ can fail https://ilo.im/15zi7o
_____
#Header #Sidebar #Scrolling #WebDev #Frontend #CSS #CssGrid #CssFlexbox
Polypane · Getting stuck: all the ways position:sticky can fail
#Development #Approaches
Learn CSS grid now, container queries can wait · “Take your time with new CSS, but don’t sleep on the essentials.” https://ilo.im/15z72q
_____
#Layout #Browser #CssGrid #CssFlexbox #ContainerQuery #Design #ResponsiveDesign #WebDev #Frontend #CSS
OddBirdLearn Grid Now, Container Queries Can WaitTake your time with new CSS, but don't sleep on the essentials
#Development #Techniques
The gap · How CSS ‘gap’ can fix annoying spacing issues https://ilo.im/15z26r
_____
#Layout #Spacing #WebDev #Frontend #CSS #CssGrid #CssFlexbox
ishadeed.comThe GapAn exploration of the pain points that CSS gap solves.
#Development #Approaches
Modern CSS layouts · You might not need a framework for that https://ilo.im/15yynz
_____
#Layout #Framework #WebDev #Frontend #CSS #UtilityClass #CssGrid #CssFlexbox #CustomProperty #CssCalc
Smashing Magazine · Modern CSS Layouts: You Might Not Need A Framework For That — Smashing MagazineIt’s easy to get lost in a sea of CSS frameworks and libraries, each promising easier styling and smoother layouts. Brecht De Ruyte demonstrates four CSS utility classes (plus a bonus) using techniques that allow them to be used practically anywhere you need a particular layout — be it Grid or Flexbox — with configurable options.
#Development #Guides
How to center a div · An interactive guide to modern CSS centering techniques https://ilo.im/15xyxw
_____
#WebDev #Frontend #HTML #CSS #CssFlexbox #CssGrid #ModernCSS
www.joshwcomeau.comHow To Center a DivBack in the day, centering an element was one of the trickiest things in CSS. As the language has evolved, we’ve been given lots of new tools we can use… But how do we pick the best option? When do we use Flexbox, or CSS Grid, or something else? Let's dig into it.
#tinyCSStip Ever find yourself wishing an element was `inline` in relation to its parent, but act as a `flex` container for its content?
Hit that yet again and remembered about the multi-value `display` - hmm, has support improved?
It has! It now works cross-browser! 
#Development #Techniques
(Don’t) mind the gap · “The CSS Flexbox ‘gap’ property is pretty cool.” https://ilo.im/15g8z7
_____
#WebDev #Frontend #CSS #CssFlexbox
CSS { In Real Life } | (Don’t) Mind the GapCSS { In Real Life } | (Don’t) Mind the Gap
#Development #Techniques
CSS findings from Photoshop web version · Use cases for CSS Flexbox, CSS Grid, and CSS variables https://ilo.im/15ct0h
_____
#WebDev #Frontend #CSS #CssGrid #CssFlexbox #CssVariables #CustomProperties
ishadeed.comCSS Findings From Photoshop Web VersionA look at Photoshop web version CSS
#Development #Playgrounds
Flexer · An interactive way to learn CSS Flexbox https://ilo.im/15bcw5
_____
#WebDev #Frontend #CSS #CssFlexbox
FlexerFlexerFlexer - CSS Flexbox Playground