Faster Layouts with CSS Grid and Subgrid
hacks.mozilla.org
hacks.mozilla.org
I really like Jen Simmons's videos on CSS layouts. (https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag/vid...)
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)" 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... 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.
Funny, I often get compliments on the clacking of my mechanical keyboard in screencasts and livecodings. Creates a soothing background noise.
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.
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.
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.
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.
Grid is great for the layout of the whole page (header/content/sidebar/footer) or specific gridded containers.
Flexbox is great for everything else, and specifically what you said about in one dimension, like form label/input or a repeating set of thumbnails, or justified buttons.
[0] eg: grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
If your layout is different enough that you’ll need media queries then you’ll want to use grid anyways.
Ehhh, not really.
A common case is items laid out as boxes. On desktop I want them in rows of 3 to 5 (perhaps more on wider screens, but often this starts to look stupid beyond 4 or 5 so you set a max width for the container). And in mobile we want 1 item per row. With flexbox, you just change the width of the items from 33.33% to 100% in the media query, maybe with some adjustments to margins, and you're golden.
Grid + Flex + Block + Absolute covers all layout needs. It's funny to me because conceptually these ideas have been around on desktop/mobile layout systems forever. That they are only now making it to the web is insane.
I literally haven't used float since grid/flexbox hit adequate market share on CanIUse, and I've been doing web development full time this whole time.
https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outsi...
(shape-outside is super buggy though)
A good example is the floating picture boxes next to paragraphs on Wikipedia. How would you implement such a feature without floats?
Float is still very useful for paragraph wrapping around media, for basic alignment etc, when you do not need an entire flow of content to be under the management of flexbox. Less is more.
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/
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.
I agree with the first (it seems impossible not to) but I think the 2nd is kind of a misconception. That grid is for “architectural layout” ... it’s for any two-dimensional layout, any time, any place. And flexbox is often totally appropriate for laying out entire pages or large sections of pages, if 2 dimensions of flexibility are not needing to be controlled. You can have grids inside your flex items inside your grids inside your flex items as needed.
The decision of layouts having to look a certain way at different sizes unfortunately is often made long before any code is written to implement a design in my experience. Not much the implementation person can do except maybe push back, but it can be a tough sell to ask for an approved design to change so that the underlying code can be less hacky.
Fun fact: Grid support in Blink and WebKit were added by the same people. https://blogs.igalia.com/mrego/2017/03/16/css-grid-layout-is...
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.
Every tool for its purpose! We have nearly a full toolbox on the CSS side of things. Happiness.
"Don’t let that stop you: CSS Grid has made my layout process faster and simpler, with more flexibility. "
"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"
position: fixed;
.foo {
display: grid;
grid-template-rows: 10% 80% 10%;
height: 100vh;
}
<div class="foo">
<div>header</div>
<div>text</div>
<div>footer</div>
</div>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.
Grid is ideal for these kind of layouts.
<div>
<div class='header'></div>
<div class='content'></div>
<div class='footer'></div>
</div>
.header { height: 30px; }
.footer { height: 20px; }
.content {
height: calc(100vh - 50px);
overflow: auto;
}
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/ (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
If you want to get in touch with me about this thing, I'm maxharris9 on twitter.
If the trouble is about accessibility, please read my README! I care about that, too, and I would love help!
I dont think this comment should be here on this post. The only tie-in is layout.
It should be a show in instead.
Finally, why is JavaScript so popular? Why is driving the fact that more and more of the web getting rebuilt in JavaScript?
JavaScript is so popular because a majority of developers started with with web development, and a majority of the money flowing into development was/has been focused on gathering user information and pushing ads for additional revenue, not delivering quality content using a consistent interface.
The current HTML/CSS rendering is currently done by the browser. That part is native which means it can benefit heavily by the resources available that way (usage of the CPU/GPU, direct access to memory, etc...). It's also made by a bunch of people, with years of experience in the domain, they can make all this
Your solution would put this all on the Javascript side, which is already often put to its limits with our current usage.
React seems like a better solution. It render directly to HTML/CSS, so it profit from the browser performance to render it, but you can replace the rendering with something else (like React Native).