9 comments

  • Thomas Michael SemmlerThomas Michael Semmler, 5 months ago

    Unfortunately really bad timing to publish this, just as CSS Grid is rolling out. :/

    1 point
    • A. PociusA. Pocius, 5 months ago

      Can you give more details on CSS Grid?

      0 points
      • Thomas Michael SemmlerThomas Michael Semmler, 5 months ago

        there were a ton of updates from people around every channel about frontend, it was to miss truly ~ The best thing would be, to look at what Jen Simmons tweeted. She also compiled down a few resources for learning about CSS Grid. And of course, there is also a youtube playlist with videos from Rachel Andrew. In general, just following Jen Simmons & Rachel Andrew, or looking through their blogs will inevitably lead to CSS Grid content.

        1 point
        • A. PociusA. Pocius, 5 months ago

          Thanks, thats very helpful. But I'm a bit confused in todays CSS development. There is flexbox property too, which you can use to create grid. Or it's intended purpose is to move elements inside grid?

          0 points
          • Geoff YuenGeoff Yuen, 5 months ago

            Flexbox is more or less 1 dimensional whereas CSS Grid is 2d.

            1 point
          • Thomas Michael SemmlerThomas Michael Semmler, 5 months ago

            you can use it to create a grid system - but it is in many ways less capable for it. You see, we basically have three ways of achieving grid-based layout today in CSS:

            • floats
            • flexbox
            • and grid

            Floats of course are being misused to achieve something that looks like a layout. A floated item tells its surrounding items to flow around it, either on the left or on the right side, which pushes itself to the the direction defined.

            Flexbox defines a container as a "flex" container, whose direct childs are flex-childs. Once a flex-container is defined, you can align flex-childs along two axis', a main axis, and a cross axis. In a Grid system, ever flex-container would equal a row. So flex is being called one-dimensional, because it draws an axis through the entire container. So if the container grows as the childs break onto the next line, no new axis is drawn. Its always only one main axis, and one cross axis.

            With CSS Grid, you can define a container as a grid-container. In this grid container, you can define rows and columns. And children will align accordingly, either automatically or manually as you define it. It is a bit as if every defined column and row are invisible flex-containers, because you can use all your loved properties from flexbox in that context as well, and css grid introduces some unbelievably powerfull new functions and keywords, that will potentially see other uses as well. CSS Grid is an implementation of Grid-Systems and it basically is capable of doing anything that you want from a Grid-System and even more.

            So in short, flexbox handles one-lined layout, like a container that only has a single line of columns, but CSS Grid handles multi-lined layout, like a container that has several different rows and columns.

            I hope I could answer your question! :3

            1 point
          • Thomas Michael SemmlerThomas Michael Semmler, 5 months ago

            oh and one more thing: Just start to play around with CSS Grid - its a bit hard to comprehend when you talk about it theoretically but the minute you write grid-template-columns: repeat(12, 1fr) and you actually see what it does, it makes "click" and you will very soon ask yourself how you ever could write something else to create layout.

            1 point
            • A. PociusA. Pocius, 5 months ago

              Thanks. I already tried it out in my free time. Just starting out it was a bit confusing but now it makes sense. But still kinda afraid to use it in my own project, just because of browser support on all platforms.

              0 points
              • Thomas Michael SemmlerThomas Michael Semmler, 5 months ago

                that's what feature queries are for!

                @supports (display: grid) { .wrapper { display: grid; } }

                /* Or... */

                @supports not (display: grid) { .wrapper { display: flex; } }

                0 points