
Faster Layouts with CSS Grid and Subgrid - feross
https://hacks.mozilla.org/2019/10/faster-layouts-with-css-grid-and-subgrid/
======
miiiiiike
Good stuff. Keyboard clacking during screencasts is a non-starter for me tho.

I really like Jen Simmons's videos on CSS layouts.
([https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag/vid...](https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag/videos))

Before this month, the last time that I made a layout with CSS floats were
still in style. When I decided to _really_ learn modern CSS this month even
starter videos like "Basics of CSS Grid: The Big Picture
([https://www.youtube.com/watch?v=FEnRpy9Xfes)"](https://www.youtube.com/watch?v=FEnRpy9Xfes\)")
were over my head.. I'm a back-end developer, I'd never used Flexbox let alone
Grid. As I watched Jen's videos I scribbled down what she was excited about
and then started reading "CSS: The Definitive Guide
([https://www.amazon.com/CSS-Definitive-Guide-Visual-
Presentat...](https://www.amazon.com/CSS-Definitive-Guide-Visual-
Presentation/dp/1449393195/\)") cover to cover.

I'm really glad that I watched Jen's videos first. Having some best practices
in my head before I learned the mechanics of Flexbox and Grid helped
crystallize everything. Now that I'm basically through CSS: TDG I'm re-
watching her videos and getting even more out of them.

~~~
Swizec
> Good stuff. Keyboard clacking during screencasts is a non-starter for me
> tho.

Funny, I often get compliments on the clacking of my mechanical keyboard in
screencasts and livecodings. Creates a soothing background noise.

~~~
miiiiiike
Clacks drive me up the wall. Having a table mounted mic in a podcast gets to
me too. I can't concentrate if I keep hearing elbows hitting a table through a
mic stand.

It's more editing work but I like to split out the screen recording, VO, and
PTC. Bonus, you can get rid of jump cuts and other weird edits by cutting to
the screen recording just before you messed up your line.

~~~
Swizec
What’s VO and PTC?

My mic is on a boom with a shock mount so the clacks really are just mellow
background noise. I hate the loud bangs too.

~~~
0xffff2
VO -> Voice Over I assume. No idea what PTC is.

~~~
mkl
I think it's "Piece to Camera", which took quite some digging to find!

~~~
danpeddle
Push to chat, no?

~~~
mkl
The context is video creation: "It's more editing work but I like to split out
the screen recording, VO, and PTC."

Piece to camera is talking directly to the camera, unlike a voice over while
showing something else. Makes sense to me, but I'm guessing a bit.

How would "push to chat" fit in? I don't recognise it.

~~~
danpeddle
Was thinking in context of gated voices, background noise etc. Think it’s
actually push to talk, so I’m not right on reflection.

------
kerkeslager
I've come to prefer flexbox over grid, the main reason being that it gives
much more sensible behavior on different screensizes. When you want to lay out
for different sizes of screens, grid usually means a completely separate
layout inside a media section, while flexbox's wrapping behavior seems to
smoothly transition between wide and narrow screens with only a few
margin/width adjustments. There may be a sane way to get the same behavior
with grid auto-flow, but if there is, I haven't figured it out.

One thing I'd like to try, but have never had the budget for, is completely
isolated grid layouts for different sizes. That is, _all_ the layout is in
mutually-exclusive media sections. This has a higher up-front cost, but I
suspect in the long run, the higher up-front cost would be outweighed by
having layouts more fine-tuned for the screen sizes, and more decoupled so you
don't have to worry about changes in desktop-size layouts affecting mobile-
size layouts.

Flexbox also has a significantly larger browser share than Grid on CanIUse.

Really though, I'm greatly relieved to see browsers start implementing some
layout tools that corresponds to how people actually think about layouts. The
float years were dark times.

~~~
weo3dev
Oof. You are definitely missing the entire point of CSS Grid.

CSS Grid is a _two_ dimensional layout tool. Flexbox is one.

CSS Grid is for architectural layout. Flexbox is for alignment and flow
layout.

CSS Grid was enabled across all major platforms by October 2017. You've had
two years to figure that out. You want it on IE? Then use CSS Grid's original
syntax because __Microsoft supported Grid first __.

The browsers haven't "started implementing some layout tools" \--- they
literally did it, en masse, in 2017. Grid was available for everyone's use by
October.

Do yourself a favor and work through the examples here:
[https://gridbyexample.com/](https://gridbyexample.com/)

Do yourself another favor, and stop trying to make different layouts for all
the different sizes. Or, go with insanity - your call. Grid is for responsive
layout, out of the box; no negative margins, no weird padding, no inane extra
workarounds just to get something to line up.

Once you understand that CSS Grid is the tool we have been waiting for since
the late 90s, and that _it_ , NOT Flexbox, is the sane, maintainable, future-
proof layout tool for pages, and then using Flexbox within it to adjust flow
and tempo -- you will/can spend a lot more time playing with things for the
sake of play, and not for the sake of debugging.

Good luck.

~~~
jsjohnst
While I agree with almost everything you said, did you need to be
condescending while doing it?

~~~
thedevilslawyer
These is value to vehemence in arguments.

~~~
jsjohnst
`s/vehemence/passion/` and I might have agreed. The words may be similar, but
there is a distinct difference between them. Had OP just showed passion for
the topic without being vehement, I think it might have landed a lot better.

------
fimdomeio
Please take into account current support for subgrid [1].

My first time redoing quite complex checkout table with mobile support was a
nightmare. I only realised I needed something more halfway along the process.
Found out it was subgrid I was looking for and they figuring out there was no
current browser support.

But using a oneliner like `grid-template-columns: repeat(auto-fill,
minmax(30rem, 1fr));` too almost fully create a grid system is pretty amazing
and something you can use right now.

1\. [https://caniuse.com/#feat=css-subgrid](https://caniuse.com/#feat=css-
subgrid)

~~~
mtarnovan
wow, you're not kidding. only latest FF supports subgrid ?!

~~~
simcop2387
not latest, but nightly FF. That's a pretty big non-starter.

~~~
miiiiiike
Support is coming tho. Always good to hear about what's next.

------
tobr
Faster as in less time to author or as in better performance?

~~~
skyfaller
Based purely on the article content, it appears to be "less time to author":

"CSS Grid has made my layout process faster and simpler, with more
flexibility. We can get started with a few basics, and the fallbacks don’t
have to be overwhelming"

------
arminiusreturns
All I want is a sticky, permanent header and footer and the rest of the page
for text. (without the text going behind the footer/header) Can grid do this?
I really don't like using javascript frameworks, I'm trying hard to keep my
stuff pure html5/css3.

~~~
btbuildem

      .foo {
        display: grid;
        grid-template-rows: 10% 80% 10%;
        height: 100vh;
      }
    
      <div class="foo">
        <div>header</div>
        <div>text</div>
        <div>footer</div>
      </div>

~~~
tux1968
Don't think that has the desired effect; at least if I understood the request
properly.

The text area won't get a scrollbar when more text is added to fill the view
area. It seems in this case you would have to manually ensure that the text
you gave could fit in 80% of the screen, or bad things happen visually. Also,
the header and footer aren't permanent, they are affected by the entire-page
scrollbar.

~~~
nicoburns
All you need is an `overflow-y: scroll` on the text element, and it will work
as desired. The whole page won't have a scrollbar, because no content will be
overflowing past it's boundaries.

Grid is ideal for these kind of layouts.

~~~
tux1968
Thanks, that worked. Although I did still have to suppress the page scrollbar
with "body { overflow-y: hidden; }" Not sure why.

~~~
snuxoll
Might need to use normalize or reset to deal with margin collapse, even then
I’ve noticed the behavior at random times. The CSS box model is simple yet
obtuse all at once.

------
dearue
Really interesting. Didn't even know that this existed! Will definitely be
checking it out and using it in future projects!

------
fourthark
(video)

------
maxharris
So I'm working on a replacement for HTML and CSS. Right now it's written in
JavaScript and it renders to canvas.

The reason I'm posting here is because you can write your own layout
components in my system. So if you have a new idea, instead of waiting years
for it to get standardized and supported by the browsers, you can just roll
your own idea and run it in anywhere without any fuss. (Flexbox took years to
do something that should have only taken days.)

Live demo: [http://doc-test.maxharris.org/](http://doc-test.maxharris.org/)
(NB: it doesn't support mobile touch events yet, so try that out on a desktop
browser.)

The framework used by the demo:
[https://github.com/maxharris9/layout](https://github.com/maxharris9/layout)

If you want to get in touch with me about this thing, I'm maxharris9 on
twitter.

~~~
maxharris
If you're the ones that downvoted me, can you please explain why? I'm
dedicating my life full-time to working on this, and I don't understand why
this would offend you.

If the trouble is about accessibility, please read my README! I care about
that, too, and I would love help!

~~~
swsieber
Not the downvoter, but...

I dont think this comment should be here on this post. The only tie-in is
layout.

It should be a show in instead.

~~~
maxharris
D'oh! I forgot all about that! I'm not trying to be spammy. I'm just trying to
show that there is a completely different way of doing layout.

