CSS Grid Changes EVERYTHING - Amazing Presentation

By: Coding Tech

7917   130   227734

Uploaded on 07/17/2017

CSS Grid is now live in all major browsers, and with it everything we know about web layouts changes! The CSS Grid Layout Module introduces a native CSS grid system, provided at the viewport level, that achieves what CSS frameworks and popular grid systems could only dream about: Responsive, flexible, pure CSS grid layouts, independent of document source order, that allow us to treat the browser as a true design and layout surface.

EVENT: WordCamp Europe, Paris, France, June 2017

SPEAKER: Morten Rand-Hendriksen, https://www.linkedin.com/in/mortenrandhendriksen/

SLIDES: https://www.slideshare.net/mor10/css-grid-changes-everything-about-web-layouts-wordcamp-europe-2017

PERMISSION: The original content of this video is under the Creative Commons Attribution license (reuse allowed).

Comments (7):

By bpicolo    2018-02-07

You don't need to worry about UC browser if you aren't in China (that knocks several other browsers > 1% "global" share too). Opera Mini + IE11 is ~5.5% unsupported.

One recommendation from the video the other day was also very good in this regard: https://youtu.be/7kVeCqQCxlk?t=23m45s

Create something that works on mobile, then use grid to build outwards. Then you get reasonable views on unsupported platforms (the mobile-centric view, and most platforms that don't support grid are Mobile) and grid works where it can / needs to.

IE11 will -never- support grid. Don't let that hold you back! (Unless you're specifically developing for an IE11-rich market)

Original Thread

By anonymous    2017-09-20

You can download a simple small CSS file from GitHub using this link: https://github.com/marcvannieuwenhuijzen/BootstrapXL

If you add this CSS file to the HTML after the Bootstrap CSS file you will be able to use col-xl-{size}, col-xl-push, hidden-xl, etc. The media-query breakpoint is 1600px;

Update The alpha release for Bootstrap 4 is available now with native support for extra large screens. http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/ but it's breakpoint for extra large is still 1200px.

Update 2 (july 2017) Stop using bootstrap and start using standard CSS grids, TODAY. You can find an introduction here.

Original Thread

By anonymous    2017-09-23

I am new to programming and web dev in general. I am in the process of making a personal website.

I want to put boxes in a grid with 4 columns, similar to what you see here: https://devpost.com/software/search?query=is%3Afeatured

Each of these boxes represents an object, and I want to be able to display some of the data into the box, and the rest of data in a popup dialog when you click on the box.

I have to playing around with the CSS grid layout, which is becoming popular these days (highly recommend this video: https://www.youtube.com/watch?v=7kVeCqQCxlk).

The thing with 4 columns work when I hardcode bunch of div elements inside a wrapper div. However, whenever I use *ngFor on the wrapper containing my array of data and feed in the data from each iteration to an inner div element, the grid layout gets destroyed, placing everything into one column.

When I manually feed in the data using multiple div elements (item2 here), it works as desired:

.wrapper {
    margin-left: 1em;
    margin-right: 1em;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: 1em;
    grid-column-gap: 1em;
}
<div class="wrapper">

    <div class="item2" style="background-color: deepskyblue;">
        <img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" >
        <p>more text here.</p>
    </div>

    <div class="item2" style="background-color: deepskyblue;">
        <img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" >
        <p>more text here.</p>
    </div>

    <div class="item2" style="background-color: deepskyblue;">
        <img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" >
        <p>more text here.</p>
    </div>

    <div class="item2" style="background-color: deepskyblue;">
        <img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" >
        <p>more text here.</p>
    </div>

    <div class="item2" style="background-color: deepskyblue;">
        <img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" >
        <p>more text here.</p>
    </div>
    
</div>

Using *ngFor... it runs for the length of the array "stickyNotes," but stacks the boxes only below each row.

<div class="wrapper" *ngFor="let s of stickyNotes; let i = index" >
    <div class="item2" style="background-color: deepskyblue;">
        <img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" >
        <p>more text here.</p>
        <p>{{s.title}}</p>
    </div>
</div>

My hack around this was... have this div element 4 times with i incrementing by 1 on *ngIf (i+1, i+2, etc.). Problem here is that when a new row starts, grid-row-gap in CSS is ignored.

<div class="item2" style="background-color: deepskyblue;" *ngIf="i < stickyNotes.length && i%4 === 0">
      <img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" >
      <p>more text here.</p>
      <p>{{stickyNotes[i].title}}</p>
</div>

<div class="item2" style="background-color: deepskyblue;" *ngIf="i+1 < stickyNotes.length && i%4 === 0">
      <img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" >
      <p>more text here.</p>
      <p>{{stickyNotes[i+1].title}}</p>
</div>

<!--2 more times until i+3-->

I am wondering if there is a way to create a custom iterable directive without destroying the grid property and without having the item2 class coded 4 times (or any other methods).

I have tried bootstrap row and col attributes, but with 4 columns, the responsiveness wasn't as nice as the grid layout.

Any help or suggestion would be appreciated!

Original Thread

By anonymous    2017-12-04

You might want to check CSS GRID (it's native css, no need framework nor library), it is amazing !

https://www.youtube.com/watch?v=7kVeCqQCxlk

Original Thread

By anonymous    2018-02-26

@JohannesPiontkowitz none. I am using this [css grid](https://www.youtube.com/watch?v=7kVeCqQCxlk&t=14s)

Original Thread

Popular Videos 98

Submit Your Video

If you have some great dev videos to share, please fill out this form.