#gridlayout — Public Fediverse posts

Auch eine deutsche Version ist wie immer verfügbar: ich habe einen neuen Artikel verfasst! Er beschreibt, wie man ein CSS Grid erstellt, das ein klassisches mehrspaltiges Raster (z. B. 12 Spalten) mit Layout-Breakouts (Full Bleed) kombiniert.
CodePen-Demos des finalen Layouts und zwei Vorversionen sind im Tutorial verlinkt.
Ich freue mich sehr über Kritik!

#frontend #css #cssGrid #gridLayout #cssLayout #webDev

https://www.sebkln.de/tutorials/css-layout-breakout-mit-multi-column-grid/

I wrote a new article! It explains how to create a CSS Grid that combines a classic multi-column grid (e.g. 12 columns) with Layout Breakouts (Full Bleed positioning). Allows for flexible alignment of grid items.
CodePen demos for the final layout and two pre-versions are linked in the tutorial. Yes, there's a tl;dr. 😄
I am very interested in your feedback!

#frontend #css #cssGrid #gridLayout #cssLayout #webDev

https://www.sebkln.de/en/tutorials/css-layout-breakout-with-multi-column-grid/

I have a new article out on Frontend Masters: get the number of auto-fit/ auto-fill columns in #CSS
https://frontendmasters.com/blog/count-auto-fill-columns/

Check it out, I can assure you you'll probably learn something new. At the very least that some issues have recently been fixed... 😼

#code #coding #frontend #gridLayout #cssLayout #cssMaths #web #webDev #dev #webDevelopment

I have a new article out on Frontend Masters: get the number of auto-fit/ auto-fill columns in #CSS
https://frontendmasters.com/blog/count-auto-fill-columns/

Check it out, I can assure you you'll probably learn something new. At the very least that some issues have recently been fixed... 😼

#code #coding #frontend #gridLayout #cssLayout #cssMaths #web #webDev #dev #webDevelopment

I have a new article out on Frontend Masters: get the number of auto-fit/ auto-fill columns in #CSS
https://frontendmasters.com/blog/count-auto-fill-columns/

Check it out, I can assure you you'll probably learn something new. At the very least that some issues have recently been fixed... 😼

#code #coding #frontend #gridLayout #cssLayout #cssMaths #web #webDev #dev #webDevelopment

I have a new article out on Frontend Masters: get the number of auto-fit/ auto-fill columns in #CSS
https://frontendmasters.com/blog/count-auto-fill-columns/

Check it out, I can assure you you'll probably learn something new. At the very least that some issues have recently been fixed... 😼

#code #coding #frontend #gridLayout #cssLayout #cssMaths #web #webDev #dev #webDevelopment

#CSS subgrid help?

Live test https://codepen.io/thebabydino/pen/raNedoQ?editors=0100 with problem: want the same fixed height for description on all card rows

repeat(3, auto) 😿 different heights for cards on different lines
repeat(6, auto auto 3lh) 😿 unwanted space below cards widescreen
auto-fit instead of 6 won't work 😿

#subgrid #cssLayout #cssGrid #gridLayout #layout #code #coding #frontend #help #web #dev #webDev #webDevelopment

#CSS subgrid help?

Live test https://codepen.io/thebabydino/pen/raNedoQ?editors=0100 with problem: want the same fixed height for description on all card rows

repeat(3, auto) 😿 different heights for cards on different lines
repeat(6, auto auto 3lh) 😿 unwanted space below cards widescreen
auto-fit instead of 6 won't work 😿

#subgrid #cssLayout #cssGrid #gridLayout #layout #code #coding #frontend #help #web #dev #webDev #webDevelopment

#CSS subgrid help?

Live test https://codepen.io/thebabydino/pen/raNedoQ?editors=0100 with problem: want the same fixed height for description on all card rows

repeat(3, auto) 😿 different heights for cards on different lines
repeat(6, auto auto 3lh) 😿 unwanted space below cards widescreen
auto-fit instead of 6 won't work 😿

#subgrid #cssLayout #cssGrid #gridLayout #layout #code #coding #frontend #help #web #dev #webDev #webDevelopment

#CSS subgrid help?

Live test https://codepen.io/thebabydino/pen/raNedoQ?editors=0100 with problem: want the same fixed height for description on all card rows

repeat(3, auto) 😿 different heights for cards on different lines
repeat(6, auto auto 3lh) 😿 unwanted space below cards widescreen
auto-fit instead of 6 won't work 😿

#subgrid #cssLayout #cssGrid #gridLayout #layout #code #coding #frontend #help #web #dev #webDev #webDevelopment

#CSS subgrid help?

Live test https://codepen.io/thebabydino/pen/raNedoQ?editors=0100 with problem: want the same fixed height for description on all card rows

repeat(3, auto) 😿 different heights for cards on different lines
repeat(6, auto auto 3lh) 😿 unwanted space below cards widescreen
auto-fit instead of 6 won't work 😿

#subgrid #cssLayout #cssGrid #gridLayout #layout #code #coding #frontend #help #web #dev #webDev #webDevelopment

Because this keeps getting asked over and over... subgrid is how you get such cards whose grids align even with varying component heights.

https://www.reddit.com/r/css/comments/1itgf3h/comment/mdsg2bh/

Both the card wrapper and the cards get `display: grid` and the rest you can see in the Styles panel in DevTools below.

Live on @codepen

https://codepen.io/thebabydino/pen/QwWNwOz?editors=0100

#CSS #layout #cssLayout #cssGrid #gridLayout #code #coding #frontend #reponsive #web #dev #webDev #webDevelopment #subgrid

Because this keeps getting asked over and over... subgrid is how you get such cards whose grids align even with varying component heights.

https://www.reddit.com/r/css/comments/1itgf3h/comment/mdsg2bh/

Both the card wrapper and the cards get `display: grid` and the rest you can see in the Styles panel in DevTools below.

Live on @codepen

https://codepen.io/thebabydino/pen/QwWNwOz?editors=0100

#CSS #layout #cssLayout #cssGrid #gridLayout #code #coding #frontend #reponsive #web #dev #webDev #webDevelopment #subgrid

Because this keeps getting asked over and over... subgrid is how you get such cards whose grids align even with varying component heights.

https://www.reddit.com/r/css/comments/1itgf3h/comment/mdsg2bh/

Both the card wrapper and the cards get `display: grid` and the rest you can see in the Styles panel in DevTools below.

Live on @codepen

https://codepen.io/thebabydino/pen/QwWNwOz?editors=0100

#CSS #layout #cssLayout #cssGrid #gridLayout #code #coding #frontend #reponsive #web #dev #webDev #webDevelopment #subgrid

Because this keeps getting asked over and over... subgrid is how you get such cards whose grids align even with varying component heights.

https://www.reddit.com/r/css/comments/1itgf3h/comment/mdsg2bh/

Both the card wrapper and the cards get `display: grid` and the rest you can see in the Styles panel in DevTools below.

Live on @codepen

https://codepen.io/thebabydino/pen/QwWNwOz?editors=0100

#CSS #layout #cssLayout #cssGrid #gridLayout #code #coding #frontend #reponsive #web #dev #webDev #webDevelopment #subgrid

Because this keeps getting asked over and over... subgrid is how you get such cards whose grids align even with varying component heights.

https://www.reddit.com/r/css/comments/1itgf3h/comment/mdsg2bh/

Both the card wrapper and the cards get `display: grid` and the rest you can see in the Styles panel in DevTools below.

Live on @codepen

https://codepen.io/thebabydino/pen/QwWNwOz?editors=0100

#CSS #layout #cssLayout #cssGrid #gridLayout #code #coding #frontend #reponsive #web #dev #webDev #webDevelopment #subgrid

Because somebody asked, here's my take on the adaptive grid with a fixed row item spanning all columns https://www.reddit.com/r/css/comments/1ir2qp9/comment/mdrssnv/ - it all boils down to just 3 #CSS declarations as seen below.

Minimal @codepen example:
https://codepen.io/thebabydino/pen/pvogXOK?editors=1100

#layout #cssLayout #cssGrid #gridLayout #code #coding #frontend #reponsive #web #dev #webDev #webDevelopment

PSA: not setting `height: 100%` to begin with on an element that has a `padding` is a better way of avoiding overflow than the nuclear solution of setting `box-sizing: border-box` on everything.

Live comparison on @codepen:

https://codepen.io/thebabydino/pen/vEYOPPe?editors=1000

#CSS #layout #cssLayout #cssGrid #coding #code #frontend #gridLayout #boxModel #web #webDev #webDevelopment #dev

I've mostly moved from absolute positioning to grid stacking:

.wrapper { display: grid }
.stack-item { grid-area: 1/ 1 }

But there's still one case where absolute positioning stacking makes sense: a stacked item is a text node (not an element or pseudo, so there's no CSS selector to select it).

#CSS #code #coding #frontend #cssGrid #gridLayout #webDevelopment #dev #web #webDev

So many grid layouts to choose from! Over 240 WordPress grid layout block themes available. Which one is your favorite?

check out the themes here: https://wordpress.org/themes/tags/grid-layout+full-site-editing/

#wordpress #themes #cms #blog #gridlayout #opensource #blocktheme #design #wpthemes

So many grid layouts to choose from! Over 240 WordPress grid layout block themes available. Which one is your favorite?

check out the themes here: https://wordpress.org/themes/tags/grid-layout+full-site-editing/

#wordpress #themes #cms #blog #gridlayout #opensource #blocktheme #design #wpthemes

So many grid layouts to choose from! Over 240 WordPress grid layout block themes available. Which one is your favorite?

check out the themes here: https://wordpress.org/themes/tags/grid-layout+full-site-editing/

#wordpress #themes #cms #blog #gridlayout #opensource #blocktheme #design #wpthemes

So many grid layouts to choose from! Over 240 WordPress grid layout block themes available. Which one is your favorite?

check out the themes here: https://wordpress.org/themes/tags/grid-layout+full-site-editing/

#wordpress #themes #cms #blog #gridlayout #opensource #blocktheme #design #wpthemes

So many grid layouts to choose from! Over 240 WordPress grid layout block themes available. Which one is your favorite?

check out the themes here: https://wordpress.org/themes/tags/grid-layout+full-site-editing/

#wordpress #themes #cms #blog #gridlayout #opensource #blocktheme #design #wpthemes

Another super old @codepen demo I redid with modern #CSS is this yummy menu https://codepen.io/thebabydino/pen/AoxZQq

CSS grid instead of absolute positioning, clip-path instead of nested skew and un-skew, CSS variables to avoid setting a separate transform chain on each item... and more!

#gridLayout #cssGrid #clipPath #clipping #cssTransforms #cssVariables #coding #code #frontend #webDevelopment #web #dev #webDev

Updated 10+ year old SO answer on how to position items for a circular menu https://stackoverflow.com/a/15185180/1397351

Because #CSS got better in the meanwhile. This remake uses CSS grid instead of absolute positioning, CSS vars to reduce the code and CSS trigonometry for improved maintainability.

@codepen demo https://codepen.io/thebabydino/pen/nLNRYx

#maths #trigonometry #geometry #grid #gridLayout #cssVariables #menu #cssMaths #cod #coding #frontend #web #dev #webDev #webDevelopment

One #CSS property I use a lot is `grid-area`.

In this basic @codepen example, `grid-area` (through its `grid-row` and `grid-column` components) is all that changes value between the narrow and wide screen cases (for the nav items wrapper and for the search wrapper) https://codepen.io/thebabydino/pen/YzmrXZo

#cssGrid #gridLayout #responsive #code #web #ded #webDev #webDevelopment #coding #frontend

Here's another grid of cubes remake on
@codepen:

https://codepen.io/thebabydino/pen/DZOdMq

Now using CSS grid instead of absolute positioning, CSS variables to greatly reduce the amount of code needed.

#CSS #gridLayout #cssGrid #transform #3D #code #coding #frontend #colorMix #web #dev #webDev #webDevelopment #interactive

Here's a little thing 🦜 I made on @codepen:

https://codepen.io/thebabydino/pen/bGXeGoa

Uses clip-path, CSS grid, variables, halftone patterns https://mastodon.social/@anatudor/112401133442879091 and more! 🌟

#CSS #gridLayout #cssGrid #SVG #filter #svgFilter #textEffect #clipPath #code #coding #frontend #webDev #web #dev #webDev

Here's another little something from forever ago that I've recently updated on @codepen: a circular menu!

https://codepen.io/thebabydino/pen/nKzaPQ

The code was really outdated, so I redid it to use CSS variables, trigonometry, grid, clip-path, SVG filters for the inner shadow & grain.

Hope you like it!

#CSS #cssVariables #clipPath #cssGradient #SVG #filter #svgFilter #cssGrid #gridLayout #code #coding #frontend #dev #web #webDev #webDevelopment #cssMaths #trigonometry #Maths #geometry

Someone hearted my orbits loader so I just had to scramble to quickly update it to use CSS grid instead of absolute positioning, CSS trig instead of precomputing tan in the Pug & passing it to the #CSS as a custom property & individual transform functions.

You can see it on @codepen:
https://codepen.io/thebabydino/pen/VwYqbXB

#cssGrid #gridLayout #transform #3D #loader #spinner #Maths #geometry #trigonometry #code #coding #frontend #web #dev #webDevelopment #dev

Find it mind-boggling anyone could find something so simple mind-boggling (I'm also bored of this kind of thing since I've coded it way too many times over the past 7 years), but here's a faded progress ring in under 20 heavily commented #CSS declarations on @codepen:
https://codepen.io/thebabydino/pen/vYomEaO?editors=0100

#gridLayout #cssGrid #cssGradient #mask #cssMask #code #coding #frontend #web #dev #webDev #webDevelopment

Tbh, the words and lines in that post just turn into worms dancing on the page for my brain, so don't ask me what I think about it, I haven't been able to read it.

But if you're interested in no JS masonry and have a better brain, check it out https://developer.chrome.com/blog/masonry-syntax

#CSS #code #coding #cssGrid #gridLayout #frontend #web #dev #webDev #webDevelopment

FYI: grid columns don't have to be equal‼️

I keep seeing ppl extracting ratios, ending up with 10+ columns. Then every single damn item on the grid needs to have explicitly set how many columns it spans. 🙄

When 3 unequal columns means not having to set that on half the items‼️

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

#tinyCSStip

Would have thought everyone knows this, but apparently not, so...

When an element has `display: grid` (or `flex`) & you inspect it, you'll see a little grid (or flex) label next to it in the Elements tab. If you click it, this highlights its grid, showing grid tracks, gaps...

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

I have a CSS grid layout with three columns: "sidebar main .". The sizes are 350px auto minmax(0, 350px). This creates a nice effect where the main content is exactly at the center of the screen and the sidebar is to the left of it.

The problem is that when I make the screen smaller, the right empty column gets smaller but the main column also gets smaller. Is it possible to make it so that the main column only starts to get smaller when it actually has to, when the right column is already 0 width? Or should I construct this layout differently?

What I want is a layout where the main column is in the middle of the page and the sidebar is to the left of that, like:

>   [][  ]     <

Is the filter/search broken on WordPress? Only 20 photography block themes with grid layout listed in the directory?

#wordpress #theme #foss #opensource #software #cms #blog #wptheme #design #blocktheme #gridlayout