1-Line CSS Layouts | Hacker News Reader

1-Line CSS Layouts

1linelayouts.glitch.me

245 pointssysadm1n60 comments

If 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://cssgridgarden.com/

Why does a page about CSS layouts not display anything at all unless JavaScript is enabled? So much for "1-line CSS layout". Defective website.

I believe because this is an informational article hosted on someone's platform (Glitch in this case).

I 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?

I feel the same issue and I'm 24, I think css grid is overwhelming

> 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.

> 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 :)

IE11 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.

I 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.

I 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.

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

https://css-tricks.com/snippets/css/complete-guide-grid/

Grid had a very awkward release / compatibility story so loads of devs who were looking for a good support story just used flexbox to accomplish what they needed to do and never learned grid. The zeitgeist of grid kind of ended before support hit acceptable levels, and grid is more or less just a syntactical wrapper around flex. The `gap` property is the real killer

No, you are not alone. CSS Grid takes everything you could achieve with Flexbox and makes it more difficult.

You're not alone. Flex and grid are so complex you need to be full-time front-end to master them. The old complexity has been replaced by something even more complex.

Same. I’ve been doing web dev since before FrontPage and I still have to Google a lot of CSS Grid properties. I don’t have an aversion to it, I just haven’t picked it up for some reason.

I think it has a lot to do with perceived browser support and lack of familiarity. Perhaps also a bit of CSS fatigue: “I just learned flex bix and that’s good enough.”

https://css-tricks.com/snippets/css/complete-guide-grid/

All the examples are more than one line.

The "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.

The 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.

Everything is one-line if you minify them enough.

Remember 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.

That seems like a rather specific use case, which can be handled regardless by using `@media print` styles.

These 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.

I'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.

Yes, 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-flexboxi...

The 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;
  }

Same thing with flow:

    .ex5 { 
      flow: grid(header header header,
                 lside   main  rside,
                 footer footer footer);
      border-spacing: 3px;
    }

    main    { float: "main"; }      
    footer  { float: "footer"; }

In case of Sciter, single property flow and flex units define everything that flexbox and grid can do with 20+ properties. And note: flexbox breaks existing CSS box model, flow/flex units - do not.

See: https://terrainformatica.com/w3/flex-layout/flex-vs-flexbox....

This might help - https://layout.bradwoods.io/

I have the following bookmarked and on the hotbar for this exact reason. I don't have to mess with frontend every day so they're not memorized.

[1] https://css-tricks.com/snippets/css/a-guide-to-flexbox/ [2] https://css-tricks.com/snippets/css/complete-guide-grid/

I think this was it for me. I just spend some time reading through both of these pages, until it all came together.

I 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_La...

My favorite CSS one liner is "gap" property in flexbox layouts.

Agreed! I spent way too long doing flexbox layouts before I discovered 'gap'.

Well, gap for flexbox is fairly new https://caniuse.com/flexbox-gap

I literally did not realize this was a thing. And I write flexbox all the time. How did I miss this?

See also https://every-layout.dev -- IMHO the most profoundly coherent resource on the topic since CSS was invented.

Wow, CSS examples and all you see with JS disabled are white boxes. o_O

It's because they're live examples. If you change the css in the textbox, the example will be updated with your changes.

I 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.

this page is great and very helpful.

That’s not one line and tldr it’s about flex and grid

I 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.

Many people learned CSS before these functions were available. So, it's a newer, simpler way of doing something known.

If someone is using CSS for living, they must know these basics as they come out. Also, browser compatibility is a thing.

As 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.

CSS 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.

But none of this is about the box model.

Tell that to people who use margin and padding to align objects in CSS.

Between 2007 and 2009, Internet Explorer 6 was still a thing. It was incredibly daring on YouTube’s part to put up a “Internet Explorer is deprecated” banner back in 2009; it had to be done without official approval. [1]

In 2011, “display: table” was cutting edge; we finally had few enough IE6 and IE7 users that it was practical to pull off, albeit with “” hacks.

I still had to deal with IE-specific bugs like the fact webfonts didn’t work in IE8 when put in an IFRAME — but did work in IE9 when rendering in IE8 mode. This wasn’t limited to IE: Safari had a bug where you couldn’t legibly print a page with webfonts on them, requiring a Safari-specific hack to disable webfonts in the print CSS.

Professional web developers were not using stuff like “display: flex” or “display: grid” in production until the late 2010s, when Edge and Chrome was finally reducing the number of Internet Explorer uses to a sane level.

[1] https://blog.chriszacharias.com/a-conspiracy-to-kill-ie6

> grid existed since 2007, flex since 2009.

These two only existed theoretically. For anyone actually earning a living with the frontend they didn't exist because:

- grid kinda existed in IE, but not in other browsers. Well, you could build a site that only targeted IE, but in 2007 this was already being really frowned upon and out of vogue.

When grid was finalized, it was a different version of the spec, not entirey compatible with IE's. Chrome and Firefox only got grid in 2017.

- flex was only partially supported by browsers until 2012 when it was fully supported, but behind a prefix. Full support without a prefix only appeared in 2013.

I mean, I love the fantasy world you have constructed, but there are people who actualy do frontend and do actually remember the anciaent histroy of checks notes the past 10 years or so

From where I sit, here in late 2021 it has just become finally possible to use “Display: Grid” [1] on a real world site. Microsoft has finally configured IE11 to force a website to open up in Edge if the patched IE11 decides the site is not IE compatible; I just need to learn how to make my site refuse to open in IE11 (opening up in Edge instead) to use “Display: Grid”.

I really wish Display: Grid was practical to use back in 2009. It would had been a lot more straightforward than the “Display: Table” stuff I did instead.

[1] https://caniuse.com/?search=Display%3A%20Grid

> From where I sit, here in late 2021 it has just become finally possible to use “Display: Grid”

Indeed. There's a reason caniuse lists browsers all the way back to 2009 or so :D

There's a great spectrum of people between "using CSS for living" and "has never touched web development at all".

So yes. This is useful to significantly more people than you imagine.

Well, there is a response above you to my reply, he is saying he never used display grid or flex and used CSS for living.

He said, literally, "used to live and breath css, but has been out of web development for about 6 years now"

I added emphasis so you don't twist other people's words in the future.

Thanks for the emphasis then.

Because some of us started out in the nineties and like to get a quick update on what is possible in case we need it somewhere and web design isn't our main responsibility.

In fact, the single most important resource I wish for of this kind, would be a reference page that shows all common layouts and tech-stack agnostic examples of popups, overlays, off-canvas sidebars and such using the most up-to-date implementation so we wouldn't have to include a huge CSS framework for something that's a few lines of modern CSS supported by evergreen browsers.

This is one of the places where you can learn it, us having existing knowledge does not mean teaching materials are useless

Reply on news.ycombinator.com