8 ms·
1-Line CSS Layouts
- TranquilMarmot 5y agoIf you're new to flexbox/grid check out these fun games to learn them. Really helped me get the syntax down a little better! https://flexboxfroggy.com/ https://flexboxfroggy.com/ https://cssgridgarden.com/ https://cssgridgarden.com/
- lykahb 5y agoRemember that a user may want to print the shopping cart content, receipts, or nearly anything on the page. This is especially common for the non-technical folks or the ones with poor connection. The CSS grid still works worse with the printing page breaks than the tricks with the floats and margins.
- froddd 5y agoThat seems like a rather specific use case, which can be handled regardless by using `@media print` styles.
- NackerHughes 5y agoWhy does a page about CSS layouts not display anything at all unless JavaScript is enabled? So much for "1-line CSS layout". Defective website.
- Brajeshwar 5y agoI believe because this is an informational article hosted on someone's platform (Glitch in this case).
- oblak 5y agoI often complain about stuff like this but the page is visible, it's the editable forms that you're expected to play with that are empty. On topic: these are great. I am not sure why grid is one of the most useful, yet underutilized set of features in CSS. Could it have something to do with the fact that there are literally a 1000 ways to accomplish the same thing with it? It's been years since their introduction and I am still very much not comfortable and have to use MDN every time I have to do anything. Is it just just my old age? Am I alone in this?
- a_chris 5y agoI feel the same issue and I'm 24, I think css grid is overwhelming
- TranquilMarmot 5y ago> I am not sure why grid is one of the most useful, yet underutilized set of features in CSS First time I tried to use grid layout, we had to roll back the changes because it didn't work in IE11... now that IE11 support is being phased out in most places it might be more usable now? I do agree that the grid stuff is a little too robust. I'm also finding myself looking it all up again every time I need to use it... but maybe I just don't have the muscle memory down yet like I do with flexbox.
- Zardoz84 5y agoIE11 supports CSS Grid... but an older version. I have to support IE11, and I uses CSS Grid. Not works out of the box on every case, and I need sometimes to write IE11 only media blocks to fix some details. CSS autoprefixer helps here a lot.
- Semaphor 5y ago> now that IE11 support is being phased out Between last year and this year, our IE11 visitors shrank from a few percent (I think it was 5% during the week, under 1 on the weekend…) to under 1, and I got permission to kick IE11 support. Already implemented the first grid and can’t wait to use CSS variables. It’s like I suddenly landed in the future :)
- rocky1138 5y agoI suspect it has something to do with the state of the art at the time you initially learned CSS. Grid came so much later and superseded so much of what came before that it's basically likely throwing away everything we know and starting to learn from scratch.
- rp1 5y agoI use flexbox extensively, but almost never use grid. I haven't taken the time to learn it and the API is not clear enough to pick it up intuitively. I might use it if I could read some type of primer on the basic concepts.
- username91 5y agoThese are great. I've been using CSS since it first [barely] appeared in IE3, but I've been behind on fully getting to know flex and grid. Didn't know about aspect-ratio at all. Maybe that says more about the amount of attention I've been paying, but I learned a lot from these examples.
- dorianmariefr 5y agoThat’s not one line and tldr it’s about flex and grid
- system2 5y agoI don't want to sound cocky but why is this even fascinating? Literally CSS Basics 101 and the first thing to learn about boxes and grids.
- rocky1138 5y agoMany people learned CSS before these functions were available. So, it's a newer, simpler way of doing something known.
- system2 5y agoIf someone is using CSS for living, they must know these basics as they come out. Also, browser compatibility is a thing.
- mankyd 5y agoAs someone who used to live and breath css, but has been out of web development for about 6 years now, I find info like this awesome.
- mankyd 5y agoAs someone who used to live and breath css, but has been out of web development for about 6 years now, I find info like this awesome.
- system2 5y agoCSS display: grid existed since 2007, flex since 2009. If people are not using box model with CSS, I wonder how they are using it. Box model of CSS is "hello world" of python. I said I didn't mean to be cocky. It just makes me think people don't even touch CSS because if I publish an article saying "this is how you print hello world in C" people wouldn't care.
- oneeyedpigeon 5y agoBut none of this is about the box model.
- cosmotic 5y agoAll the examples are more than one line.
- ggoo 5y agoThe "1-line" is referring to the one line doing most/all the hard work in each example. Though I do agree - seems like they wrote the title before the article here.
- laGrenouille 5y agoThe text makes it fairly clear that there is one particular line of code that each slightly longer example is showing off. The one line of interest is highlighted at the top of each example.
- Ayesh 5y agoEverything is one-line if you minify them enough.
- butz 5y agoMy favorite CSS one liner is "gap" property in flexbox layouts.
- anschwa 5y agoAgreed! I spent way too long doing flexbox layouts before I discovered 'gap'.
- infensus 5y agoWell, gap for flexbox is fairly new https://caniuse.com/flexbox-gap https://caniuse.com/flexbox-gap
- jrochkind1 5y agoI literally did not realize this was a thing. And I write flexbox all the time. How did I miss this?
- toastercat 5y agoI've run into CSS Grid more than once, but every time I do, I'm confused by it. I know I should probably just deep-dive into it. I have tried CSS Grid Garden in the past. I don't remember a damn thing from it.
- jrochkind1 5y agoI just finally learned grid, and now I wonder why I waited so long, it's incredibly powerful. This multi-part MDN guide worked for me. Had to read it twice. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...
- c-smile 5y agoYes, nor flexbox nor grid are intuitive. And Classic Holy Grail Layout is not a one-liner but this: .ex5 .parent { display: grid; grid-template: auto 1fr auto / auto 1fr auto; } .ex5 header { padding: 2rem; grid-column: 1 / 4; } .ex5 .left-side { grid-column: 1 / 2; } .ex5 main { grid-column: 2 / 3; } .ex5 .right-side { grid-column: 3 / 4; } .ex5 footer { grid-column: 1 / 4; } For the note, in Sciter (flow+flex units) that is definable as main { flow:grid(1 1 1, 2 5 3, 4 4 4); } main > :nth-child(5) { /*middle section */ width:*; /* takes all available space */ height:*; } https://terrainformatica.com/2018/12/11/10-years-of-flexboxing/ https://terrainformatica.com/2018/12/11/10-years-of-flexboxi...
- chrismorgan 5y agoThe key thing is that it’s the one line of `grid-template: auto 1fr auto / auto 1fr auto` that’s doing the heavy lifting in the layout. The job of assigning elements to their places could also use named areas: .ex5 .parent { display: grid; grid-template: auto 1fr auto / auto 1fr auto; grid-template-areas: "header header header" "left main right" "footer footer footer"; } .ex5 header { grid-area: header; } .ex5 .left-side { grid-area: left; } .ex5 main { grid-area: main; } .ex5 .right-side { grid-area: right; } .ex5 footer { grid-area: footer; } Or you could lean on auto placement more heavily: in the original code, the left/main/right grid-column declarations are superfluous, and `1 / -1` is arguably clearer than `1 / 4` for the header and footer: .ex5 .parent { display: grid; grid-template: auto 1fr auto / auto 1fr auto; } .ex5 header, .ex5 footer { grid-column: 1 / -1; }
- iamandras 5y agothis page is great and very helpful.
- tommek4077 5y agoWow, CSS examples and all you see with JS disabled are white boxes. o_O
- spartanatreyu 5y agoIt's because they're live examples. If you change the css in the textbox, the example will be updated with your changes.
- pdevr 5y agoI watched a YouTube video by Una Kravets, and was led to this page from there. All the techniques revolve around the flexbox and grid selectors. In that sense, it is a good starting point (or at least, was) for a CSS developer wanting to have the latest tricks in his arsenal.
- chrisweekly 5y agoSee also https://every-layout.dev https://every-layout.dev -- IMHO the most profoundly coherent resource on the topic since CSS was invented.