https://dev.to/mateuszkirmuc/css-grid-tutorial-table-of-contents-1g4 - a cool series on #CSS #CSSGrid and fr units: the space after all the fixed-width columns are specified. Nice content https://www.linkedin.com/in/mateusz-kirmuc/.

Challenging #css question for folks. I have a grid with a header and content, the content is scrollable. I need to add padding that's equal to the height of the header to the content. I need it on the first render as well. I feel like I saw some #CSSGrid hackery that allowed something like this, but curious if #frontend folks might have any ideas.

But the content of statuses varies a lot, so using a #CSS #Grid to achieve it leaves wide gaps in the rows. The only solution for that is to truncate the content with max-heights (there's a #masonry mode for #CSSGrid but it's only supported by #firefox and then only with an about:config flag).

So I went with #columns instead which are widely supported and achieve the masonry effect. The problem with those is that content is laid out chronologically down the #column, not across the rows.

Only #Firefox supports the #masonry layout for #CSSGrid and all the other #browsers should be ashamed of themselves for not implementing it yet! https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout#creating_a_masonry_layout #webDev #CSS #Chrome

#CSSGrid という概念すらない当時。
　横256 x 縦192
のカードというかタイルというか
そんな感じでの一枚として
ホームページを作っていた。

横256 ははっきり覚えている。
縦192 は 4：3 からの逆算。
つまり記憶があやふや。

Opera での表示の最適化を最優先
IE や Netscape の整合性は次点。

そんな独りよがりの時期でした。

Sigh, I just love #CSS! ❤️

Look at this - there is no #JavaScript involved in those animations whatsoever (except for adding the CSS class that does the animation).

So beautiful!😍

I've struggled quite a bit with the following:
use different delay values for the item's `scale` animation, but do _not_ delay the scale when hovered. The solution has been to wrap the item into an additional element and animate those when hovered. 💡

#WebDesign #WebDev #Animation #CSSGrid #CSSAnimation #selecuery

Woah :awesome: did you know that #Firefox has an implementation of masonry layout?

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout

It is only implemented in Firefox (behind a flag) and #Safari 17 (Technical Preview) at the moment, though (one more reason to ditch Chr**e and Ed*e if you ask me).

https://caniuse.com/?search=masonry

#CSS #CSSGrid #Masonry #Layout #WebDev

Ha, I always wanted to do this kind of "sales pitch" thingy.😄

Quite pleased with it.😊

(The styling itself is not ready yet. I've wanted to get the content out first. The grid style itself will stay, though).

#Pitch #Marketing #OpenSource #WebDesign #WebDev #selecuery #XPlusPlus #D365FO #CSSGrid #ContentCreation

I'm trying to get back into coding routine again and doing OK so far. Codecademy has helped in terms of structure so I'm more focused rather trying to do several things at once which I'm still guilty of but always new things to learn.

I've enjoyed going over css grid and realised there's a bunch of values I didn't know about definitely something I need to use more but progress. 💪 #coding #webdev #cssgrid

How does one break out of css grid?

I can do it if it's only in rows:

____
____
___________
____
____

But not with columns (I'm using grid-template-columns: repeat(3, 1fr); ) like:

------ ------ ------
------ ------ ------
___________________
------ ------ ------
------ ------ ------

I don't think I'm making any sense but this is frustrating me.

#css #CSSGrid

📣 CSS in Depth, 2nd edition, is officially underway! 📖

This will include tons of the improvements CSS has seen in the past five years, along with several chapters taking a deep look at the latest/upcoming tech for code organization (Goodbye, BEM!)

Let's go!!!!

#CSS #CSSinDepth #CSSGrid #ContainerQueries

https://dev.to/stackbit/7-ways-to-escape-css-hell-2ck6 - 7 ways to #center things in #CSS. Wish it wasn't so complicated, but #flexbox and #CSSgrid do make it far easier. Great simple post with code https://twitter.com/stackbithq.

How it's going: 👍

#FirefoxNightly #CSSGrid #MasonryLayout

Help, I'm lost in going super-detailed into a date display #css #CssGrid

An sauberen #CSSGrid -Layouts finde ich ja einfach großartig, dass ich die Blöcke in meinem Layout im Quelltext fleißig hin- und her schichten kann, ohne dass sich an der Optik was ändert...

🟧 The easiest way to get started with CSS Grid
by @zoranjambor at @CSSWeekly
#css #webdev #cssgrid #grid

https://www.youtube.com/watch?v=sAsX9e2NzZ4

Mal eine andere Art, ein zweites Element über erstem mit #cssgrid zu platzieren. Der Trick ist die 0px breite Zeile bei der Rasterdefinition und die Platzierung des Griditems mit place-self:
.gridcontainer { display: grid; grid-template-rows: auto 0px; }
.gridcontainer > :nth-child(2) { place-self: end; }

Ansehen hier: https://codepen.io/FlorenceM/pen/xxzqOKg

(diesen Trick hab ich in einem Beispiel bei https://www.freecodecamp.org/news/css-only-back-to-top-button/ entdeckt)

C’est un projet dont je suis très fier parce que j’admire énormément leur travail et que moi comme eux sommes très satisfaits du résultat ! Ils ont d’ailleurs rédigé un court article sur leur blog à propos de notre collaboration.

https://www.laurelparkerbook.com/fr/news/2021/01/nouveau-site-web/

#CSSgrid #écoconception

Orain ikusi dut nire WPren plantila HTM5ean ere gorde nuela. Baina, bootstrap erabilita.

Aste honetan, plantila bera (WP eta HTML5) nire GitHub kontura igoko dut, baina oraingoan inungo Framework gabe. #cssGrid #moa #frontend

#CSS #CSSGrid Esto mola mucho: https://gridbyexample.com/examples/