#cssgrid — Public Fediverse posts

For everyone supporting me on Ko-fi and Patreon, a little pure #CSS #3D treat.

❇️ https://ko-fi.com/post/tiles-on-icosahedron-R3F224ZYR4

❇️ https://www.patreon.com/anatudor/posts/tiles-on-166570091

#cssGrid #code #coding #frontend #jade #sass #Maths #geometry #cssLayout #cssVariables #interaction #web #dev #webDev #webDevelopment

For everyone supporting me on Ko-fi and Patreon, a little pure #CSS #3D treat.

❇️ https://ko-fi.com/post/tiles-on-icosahedron-R3F224ZYR4

❇️ https://www.patreon.com/anatudor/posts/tiles-on-166570091

#cssGrid #code #coding #frontend #jade #sass #Maths #geometry #cssLayout #cssVariables #interaction #web #dev #webDev #webDevelopment

𝗙𝗿𝗲𝗲 𝘃𝗶𝗱𝗲𝗼 𝘀𝗲𝗿𝗶𝗲𝘀 𝘁𝗼 𝗹𝗲𝗮𝗿𝗻 𝗖𝗦𝗦 𝗚𝗿𝗶𝗱:

#Videos #Courses #CSSGrid

https://thewhale.cc/posts/free-video-series-to-learn-css-grid

Learn CSS Grid with 25 online videos (4 hours) recorded by Wes Bos to learn from fundamentals to real examples.

#Development #Techniques
Fixing full-bleed CSS · A novel approach using some at-rule property magic https://ilo.im/16e9hv

_____
#ModernCSS #Layout #FullBleed #CssContainment #CssGrid #CssUnits #WebDev #Frontend #CSS

#Development #Techniques
Fixing full-bleed CSS · A novel approach using some at-rule property magic https://ilo.im/16e9hv

_____
#ModernCSS #Layout #FullBleed #CssContainment #CssGrid #CssUnits #WebDev #Frontend #CSS

On #CSS #grid #layout and how to simplify it:

https://www.reddit.com/r/css/comments/1uacy80/comment/ospxwj3/

#cssLayout #cssGrid #coding #frontend #web #dev #webDev #webDevelopment #code

On #CSS #grid #layout and how to simplify it:

https://www.reddit.com/r/css/comments/1uacy80/comment/ospxwj3/

#cssLayout #cssGrid #coding #frontend #web #dev #webDev #webDevelopment #code

#Development #Guides
Alignment in CSS Grid Lanes · How alignment works across grid and stacking axes https://ilo.im/16dws2

_____
#ModernCSS #Layouts #Masonry #Alignment #WebDev #Frontend #CSS #CssGrid #GridLanes

#Development #Guides
Alignment in CSS Grid Lanes · How alignment works across grid and stacking axes https://ilo.im/16dws2

_____
#ModernCSS #Layouts #Masonry #Alignment #WebDev #Frontend #CSS #CssGrid #GridLanes

#Development #Cheatsheets
The field guide to Grid Lanes · How to create masonry layouts in pure CSS https://ilo.im/16dmyx

_____
#ModernCSS #Layouts #Masonry #Playgrounds #Demos #ProgressiveEnhancement #WebDev #Frontend #CSS #CssGrid

#Development #Cheatsheets
The field guide to Grid Lanes · How to create masonry layouts in pure CSS https://ilo.im/16dmyx

_____
#ModernCSS #Layouts #Masonry #Playgrounds #Demos #ProgressiveEnhancement #WebDev #Frontend #CSS #CssGrid

#Development #Introductions
CSS is filling the gaps with rules · Native gap styling for grid and flex layouts https://ilo.im/16d40m

_____
#Layouts #Animations #Decorations #CssGrid #CssFlexbox #ProgressiveEnhancement #Browser #WebDev #Frontend #CSS

#Development #Introductions
CSS is filling the gaps with rules · Native gap styling for grid and flex layouts https://ilo.im/16d40m

_____
#Layouts #Animations #Decorations #CssGrid #CssFlexbox #ProgressiveEnhancement #Browser #WebDev #Frontend #CSS

#Development #Guides
The state of CSS centering in 2026 · Centering in modern CSS is really about alignment https://ilo.im/16d5a5

_____
#ModernCSS #Centering #Alignment #Layouts #CssGrid #CssFlexbox #AnchorPositioning #WebDev #Frontend #CSS

#Development #Guides
The state of CSS centering in 2026 · Centering in modern CSS is really about alignment https://ilo.im/16d5a5

_____
#ModernCSS #Centering #Alignment #Layouts #CssGrid #CssFlexbox #AnchorPositioning #WebDev #Frontend #CSS

#Development #Findings
What’s missing in CSS layout · Developer pain points and feature gaps https://ilo.im/16d39p

_____
#Surveys #Layouts #CssGrid #CssFlexbox #Accessibility #ResponsiveDesign #WebDesign #WebDev #Frontend #CSS

#Development #Findings
What’s missing in CSS layout · Developer pain points and feature gaps https://ilo.im/16d39p

_____
#Surveys #Layouts #CssGrid #CssFlexbox #Accessibility #ResponsiveDesign #WebDesign #WebDev #Frontend #CSS

#Development #Introductions
Chromium’s new CSS gap decorations · Ready for grid, flexbox, and multi-column layouts https://ilo.im/16cyte

_____
#ModernCSS #Layouts #CssGrid #CssFlexbox #CssMultiColumn #Chrome #Browser #WebDev #Frontend #CSS

#Development #Introductions
Chromium’s new CSS gap decorations · Ready for grid, flexbox, and multi-column layouts https://ilo.im/16cyte

_____
#ModernCSS #Layouts #CssGrid #CssFlexbox #CssMultiColumn #Chrome #Browser #WebDev #Frontend #CSS

#Development #Approaches
Building a UI without breakpoints · Moving to fluid CSS components for the modern web https://ilo.im/16c7es

_____
#Components #CssGrid #CssFlex #ContainerQueries #MediaQueries #FluidDesign #ResponsiveDesign #WebDev #Frontend #CSS

#Development #Approaches
Building a UI without breakpoints · Moving to fluid CSS components for the modern web https://ilo.im/16c7es

_____
#Components #CssGrid #CssFlex #ContainerQueries #MediaQueries #FluidDesign #ResponsiveDesign #WebDev #Frontend #CSS

#Development #Techniques
Adventures in CSS subgrid · Lining up content across multiple columns https://ilo.im/16b6q4

_____
#Alignments #Content #Layouts #CssGrid #CssSubgrid #Browsers #WebDev #Frontend #CSS

#Development #Techniques
Adventures in CSS subgrid · Lining up content across multiple columns https://ilo.im/16b6q4

_____
#Alignments #Content #Layouts #CssGrid #CssSubgrid #Browsers #WebDev #Frontend #CSS

In #Google #Chrome, it is possible to apply self-alignment attributes such as align-self, justify-self, and place-self to the grid container within a block element. According to the official specification, this should not be possible. #Firefox is more precise in this case, so it is only possible to align an element (grid subelement) within a grid container itself.

https://www.w3.org/TR/css-grid-1/#alignment

#css #frontend #web #development #browser #cssgrid #grid #w3c #webstandards web #technology

In #Google #Chrome, it is possible to apply self-alignment attributes such as align-self, justify-self, and place-self to the grid container within a block element. According to the official specification, this should not be possible. #Firefox is more precise in this case, so it is only possible to align an element (grid subelement) within a grid container itself.

https://www.w3.org/TR/css-grid-1/#alignment

#css #frontend #web #development #browser #cssgrid #grid #w3c #webstandards web #technology

#Development #Comparisons
Embrace the chaos · The shape and flow of masonry layouts https://ilo.im/16av8m

_____
#ModernCSS #Layouts #Masonry #CssGrid #CssFlexbox #Design #WebDesign #WebDev #Frontend #CSS

#Development #Comparisons
Embrace the chaos · The shape and flow of masonry layouts https://ilo.im/16av8m

_____
#ModernCSS #Layouts #Masonry #CssGrid #CssFlexbox #Design #WebDesign #WebDev #Frontend #CSS

So I saw a demo in the @codepen Spark and I liked the idea, but it was too JS-heavy for my taste, plus I would have preferred the rotation animations to be "hinged" around the top/ bottom edge depending on direction.

So I did it with pure #CSS on scroll https://codepen.io/thebabydino/pen/JoKqRjZ

cc @bramus

#cssScrollAnimation #scrollEffect #code #cssTransforms #cssTransform #css3D #3D #coding #frontend #cssLayout #web #dev #webDev #webDevelopment #cssGrid #cssFlex #flexbox #cssVariables #cssTransition

So I saw a demo in the @codepen Spark and I liked the idea, but it was too JS-heavy for my taste, plus I would have preferred the rotation animations to be "hinged" around the top/ bottom edge depending on direction.

So I did it with pure #CSS on scroll https://codepen.io/thebabydino/pen/JoKqRjZ

cc @bramus

#cssScrollAnimation #scrollEffect #code #cssTransforms #cssTransform #css3D #3D #coding #frontend #cssLayout #web #dev #webDev #webDevelopment #cssGrid #cssFlex #flexbox #cssVariables #cssTransition

#Development #Overviews
CSS layout fundamentals · Master the core concepts behind CSS layouts https://ilo.im/16a1ic

_____
#Layouts #Positioning #Stacking #CssGrid #CssFlexbox #BoxModel #Browsers #WebDev #Frontend #CSS

#Development #Overviews
CSS layout fundamentals · Master the core concepts behind CSS layouts https://ilo.im/16a1ic

_____
#Layouts #Positioning #Stacking #CssGrid #CssFlexbox #BoxModel #Browsers #WebDev #Frontend #CSS

Simple pricing cards - a demo I made on @codepen: https://codepen.io/thebabydino/pen/ZYOJgyW

I've posted even cooler pure #CSS ones (non-rectangular shapes + rounded corners, glassmorphism + border effects combined) for Ko-fi & Patreon supporters:

❇️ https://ko-fi.com/anatudor/tiers

❇️ https://www.patreon.com/c/anatudor/membership

#cssGrid #cssClipPath #clipping #code #web #dev #webDev #webDevelopment #coding #frontend

Simple pricing cards - a demo I made on @codepen: https://codepen.io/thebabydino/pen/ZYOJgyW

I've posted even cooler pure #CSS ones (non-rectangular shapes + rounded corners, glassmorphism + border effects combined) for Ko-fi & Patreon supporters:

❇️ https://ko-fi.com/anatudor/tiers

❇️ https://www.patreon.com/c/anatudor/membership

#cssGrid #cssClipPath #clipping #code #web #dev #webDev #webDevelopment #coding #frontend

The tiny details make the difference - check out those roundings in the cards demo!

Even cooler: the shape depends on the size of the sibling it wraps around, no magic numbers. If we need the shape to grow (for ex if we want it to have more content), there's no need to change any clip-path or mask.

#CSS #SVG #filter #svgFilter #cssSubgrid #cssLayout #cssGrid

The tiny details make the difference - check out those roundings in the cards demo!

Even cooler: the shape depends on the size of the sibling it wraps around, no magic numbers. If we need the shape to grow (for ex if we want it to have more content), there's no need to change any clip-path or mask.

#CSS #SVG #filter #svgFilter #cssSubgrid #cssLayout #cssGrid

My most hearted @codepen demos of '26:

✨ Pure #CSS #3D animated carousel https://codepen.io/thebabydino/pen/dPXVyqN

✨ Scatter & #pixelate CSS gradient https://codepen.io/thebabydino/pen/zxBrmdL

✨ Cards with concave rounding on irregular grid https://codepen.io/thebabydino/pen/WbxpKPQ

First two need very little code and are heavily commented.

#SVG #filter #svgFilter #code #coding #cssTransform #cssTransforms #css3D #cssGradient #cssGrid #layout #cssLayout #cssSubgrid #frontend #web #dev #webDev #webDevelopment

My most hearted @codepen demos of '26:

✨ Pure #CSS #3D animated carousel https://codepen.io/thebabydino/pen/dPXVyqN

✨ Scatter & #pixelate CSS gradient https://codepen.io/thebabydino/pen/zxBrmdL

✨ Cards with concave rounding on irregular grid https://codepen.io/thebabydino/pen/WbxpKPQ

First two need very little code and are heavily commented.

#SVG #filter #svgFilter #code #coding #cssTransform #cssTransforms #css3D #cssGradient #cssGrid #layout #cssLayout #cssSubgrid #frontend #web #dev #webDev #webDevelopment

#Development #Previews
When will CSS Grid Lanes arrive? · “It’s going to arrive sooner than you think.” https://ilo.im/16a21t

_____
#ModernCSS #CssGrid #Layout #Masonry #Polyfill #ProgressiveEnhancement #Browsers #WebDev #Frontend #CSS

#Development #Previews
When will CSS Grid Lanes arrive? · “It’s going to arrive sooner than you think.” https://ilo.im/16a21t

_____
#ModernCSS #CssGrid #Layout #Masonry #Polyfill #ProgressiveEnhancement #Browsers #WebDev #Frontend #CSS

RE: https://mastodon.social/@anatudor/115934384628757666

This is the thing that brought me to this question, live demo on @codepen: https://codepen.io/thebabydino/pen/XJKpYmr

#CSS #cssLayout #cssGrid #code #grid #web #dev #webDev #webDevelopment #coding #frontend

RE: https://mastodon.social/@anatudor/115934384628757666

This is the thing that brought me to this question, live demo on @codepen: https://codepen.io/thebabydino/pen/XJKpYmr

#CSS #cssLayout #cssGrid #code #grid #web #dev #webDev #webDevelopment #coding #frontend

Clip element on #scroll - a little pure #CSS demo I made on @codepen https://codepen.io/thebabydino/pen/vEGBOrg

Just scroll-driven animation magic 🪄✨ - no other tricks.

#cssScrollAnimation #code #coding #web #dev #webDev #webDevelopment #cssClipPath #cssGrid #cssLayout

Clip element on #scroll - a little pure #CSS demo I made on @codepen https://codepen.io/thebabydino/pen/vEGBOrg

Just scroll-driven animation magic 🪄✨ - no other tricks.

#cssScrollAnimation #code #coding #web #dev #webDev #webDevelopment #cssClipPath #cssGrid #cssLayout

This is what I see browsers actually doing: what I want in my simple, no wrap use case.

Slightly different things in the hypothetical case.

Chrome, Firefox, Epiphany below.

Also, please don't make fun of my browser themes. I'm a visual person, so I use themes that visually differentiate one browser from another.

#CSS #cssGrid #cssLayout

This is what I see browsers actually doing: what I want in my simple, no wrap use case.

Slightly different things in the hypothetical case.

Chrome, Firefox, Epiphany below.

Also, please don't make fun of my browser themes. I'm a visual person, so I use themes that visually differentiate one browser from another.

#CSS #cssGrid #cssLayout

Live demo on @codepen https://codepen.io/thebabydino/pen/WbxpKPQ

#CSS #SVG #filter #cssLayout #cssGrid #cssSubgrid #svgFilter #code #coding #web #dev #webDev #webDevelopment #frontend

Live demo on @codepen https://codepen.io/thebabydino/pen/WbxpKPQ

#CSS #SVG #filter #cssLayout #cssGrid #cssSubgrid #svgFilter #code #coding #web #dev #webDev #webDevelopment #frontend

#Development #Techniques
Accessible faux-nested interactive controls · How to solve a tricky accessibility problem https://ilo.im/169v7j

_____
#Nesting #HTML #Accessibility #Usability #WebDev #Frontend #DOM #CSS #CssGrid #ContainerQueries

#Development #Techniques
Accessible faux-nested interactive controls · How to solve a tricky accessibility problem https://ilo.im/169v7j

_____
#Nesting #HTML #Accessibility #Usability #WebDev #Frontend #DOM #CSS #CssGrid #ContainerQueries

#Development #Previews
New Safari developer tools · Safari’s Grid Inspector adds support for CSS ‘grid-lanes’ https://ilo.im/169url

_____
#ModernCSS #CssGrid #CssFlexbox #Masonry #Safari #Browser #DevTools #WebDev #Frontend #CSS

New Safari developer tools provide insight into CSS Grid Lanes

https://webkit.org/blog/17746/new-safari-developer-tools-provide-insight-into-css-grid-lanes/

#HackerNews #SafariDeveloperTools #CSSGrid #Lanes #WebDevelopment #WebKit #FrontEndDevelopment

How to use wa-grid with Vue

Last month, we explored using wa-card with Vue.js. In the final example, we created a grid layout using CSS, but Web Awesome also enables this with a WA component. Today, we’ll extend that example by integrating the WA component. Previously, we learned how to center content using Bulma and Bootstrap. WA provides a similar approach to these frameworks.

Web Awesome wants a basic grid to look like this:

<div class="wa-grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

You can get fancier with spans or gap definitions, but this is all you really need. So, what does the result look like?

The result looks very similar to what we did in the fourth wa-card example. The big difference is that it is more fully Web-Awesome-ized. We could end here, but we could also examine what it looks like with more data in the photos array. You might have guessed that the hard-coded examples come from JWS Pictures. When I created it, I ensured that all.json and all.xml were included so you can retrieve all the photos in your Vue app. If we add an onMounted() lifecycle hook, we can load the photos defined in the JSON file once the component has been mounted. Let’s see what that would look like.

Adding all the photos doesn’t seem to affect the design. In fact, it looks pretty good. I don’t want to just dump photos onto the page, so let’s see what Array.prototype.sort() can do for us.

Now, the images are sorted from newest to oldest rather than in the order they appear in the JSON file. The next step would be to sort and group the photos simultaneously. This way, it becomes clearer which photos belong to which batches. A photosByYear computed ref would allow for that.

The computed ref has properties for a year value and the photos taken in that year. Next time, we will see how we can further evolve this project.

First example: https://codepen.io/steinbring/pen/gbPJLLK/e3b93e220312e05d6c51444c22ed12ba

Second example: https://codepen.io/steinbring/pen/xbZNReX/9b05838c6096c00e08690c24900cd9be

Third example: https://codepen.io/steinbring/pen/GgqKjwM/22f21efec564bee348b1db9eb8dd90de

Fourth example: https://codepen.io/steinbring/pen/bNebwyx/5dadf66f9b55153a63a02d713f12ccc8

So this got picked 🌟

#CSS #SVG #filter #cssGrid #cssLayout #cssSubgrid #svgFilter #frontend #coding #web #dev #webDev #webDevelopment #code

Interessante Features des CSS Grid Layouts

https://kulturbanause.de/news/interessante-features-des-css-grid-layouts/

Explicit und Implicit Grids im CSS Grid Layout

https://kulturbanause.de/news/explicit-und-implicit-grids-im-css-grid-layout/

CSS Grid Layout und die repeat-Funktion

https://kulturbanause.de/news/css-grid-layout-und-die-repeat-funktion/

Die Einheit »fr« im CSS Grid Layout

https://kulturbanause.de/news/die-einheit-fr-im-css-grid-layout/

Die minmax() Funktion des CSS Grid Layouts

https://kulturbanause.de/news/minmax-css-grid-layouts/