Contents tagged “Grid”

There are 15 contents with this tag:

1. 

   Brad Frost

   Layout & Grid in Design Systems

   • Nicolas Hoizey
   • 27 November 2022
   • Grid, CSS, Design System
   • 5 reactions

   This interdisciplinary disconnect around grid’s mental model affects how teams execute grid. In a broken, unidirectional, “developer handoff” process, design comps are treated as sacrosanct, and developers see that 12-column semi-transparent pink guideline as a hard requirement that must implemented exactly as articulated by the static design tool. This is how a “how to do a 12-column grid in HTML/CSS?” Google search ultimately led to massive success for tools like Bootstrap. Despite the introduction of many new CSS technologies and layout techniques over many years, this antiquated 12-column mental model still dominates a lot of conversations around layout and grid.

2. 

   Donnie D'Amato

   gridless.design

   • Nicolas Hoizey
   • 27 November 2022
   • Grid, Flexbox, CSS, layout
   • 9 reactions

   The web is good at these things, just not in the ways that designers have been accustomed to working. We'll take a look at how we got here and how we might change our perspective. Let's think outside of the grid and allow other guidelines to provide a comprehensive layout.

3. 

   Trys Mudford

   It's all about that space

   • Nicolas Hoizey
   • 26 November 2022
   • CSS, Grid
   • 2 reactions

   Yet another great Utopia tool, this time for grids, but the right way:

4. 

   Hubert Sablonnière

   Prevent layout shifts with CSS grid stacks

   • Nicolas Hoizey
   • 27 July 2022
   • CSS, Grid, CLS, CWV, WebPerf
   • 22 reactions

   I keep sending people this clever solution provided by Hubert, I wonder why I still didn't add it to my links!

5. 

   Ahmad Shadeed

   The Minimum Content Size In CSS Grid

   • Nicolas Hoizey
   • 30 January 2022
   • CSS, Grid
   • 7 reactions

   Sometimes, while building a component, you suddenly notice a weird horizontal scroll bar. You keep trying and fixing the wrong thing, only to realize later that the cause is something else. How many times have you been there?

6. 

   Kev Bonett

   Expandable Sections Within a CSS Grid

   • Nicolas Hoizey
   • 15 October 2021
   • CSS, Grid
   • 5 reactions

   This is a great use case for CSS Grid's dense packing algorithm!

7. • Nicolas Hoizey
   • 2 September 2021
   • Chrome, CSS, Firefox, Grid
   • 2 reactions
   • permalink

   Anyone knows why in #Firefox sometimes the button in the bottom of https://nicolas-hoizey.com/archives/ is outside its container, while everything is fine in #Chrome? 🤔

   Maybe a CSS Grid issue?

   

   

8. 

   Ryan Mulligan

   Positioning Overlay Content with CSS Grid

   • Nicolas Hoizey
   • 2 July 2021
   • CSS, Grid
   • 3 reactions

   These are really nice ways to use CSS Grid!

9. • Nicolas Hoizey
   • 23 December 2020
   • CSS, Flexbox, Grid
   • permalink

   I'm a developer, not a graphic designer, so I genuinely wonder if CSS Grid and Flexbox automated layout and space management would be better for the flexible Web than such rigid artificial grids. I'm really wondering.

   

   Veerle Pieters @vpieters

   Responsive Grid Design: Ultimate Guide
   
   This article highlights the most important aspect of the responsive grid and how product designers can adapt grids in their design workflow. medium.muz.li/responsive-grid-design-ultimate-guide-7aa41ca7892

   

   38 09:59 AM · Dec 23, 2020

10. 

    Josh W Comeau

    Full-Bleed Layout Using CSS Grid

    • Nicolas Hoizey
    • 6 October 2020
    • CSS, Grid
    • 2 reactions

    Josh shows here beautifully[1] how to use CSS Grid to contain page elements' width and have some expand outside this containment.

11. 

    Rachel Andrew

    Breaking out with CSS Grid explained

    • Nicolas Hoizey
    • 6 October 2020
    • CSS, Grid
    • 4 reactions

    Here is a detailed explanation of Tyler Stika's Breaking Out With CSS Grid Layout article I shared previously.

12. 

    Tyler Sticka

    Breaking Out With CSS Grid Layout

    • Nicolas Hoizey
    • 6 October 2020
    • CSS, Grid
    • 5 reactions

    Now that CSS Grid support in browsers is great, I will start using this nice layout presented by Tyler more than 3 years ago.

13. 

    Evan Minto

    Intrinsically Responsive CSS Grid with minmax() and min()

    • Nicolas Hoizey
    • 30 September 2020
    • CSS, Sass, Grid, Rollup
    • 3 reactions

    I've been using a CSS Grid layout on some pages here for a while, and had issues with some of it triggering an horizontal scroll on thin viewports bellow 320 pixels.

14. 

    Keir Watson

    Responsive Grid Magazine Layout in Just 20 Lines of CSS

    • Nicolas Hoizey
    • 26 February 2020
    • CSS, Grid
    • 1 reaction

    Interesting dive into some of CSS Grid subtleties, to build a nice magazine layout.

15. 

    Rob Weychert

    Sophisticated Partitioning with CSS Grid

    • Nicolas Hoizey
    • 21 March 2019
    • Grid, CSS, layout
    • 1 reaction

    Tinnitus Tracker is the live music diary of Rob Weychert, listing more than 300 shows he's attended. Events lists can be really boring to scroll through, unless you're fond of CSS and want to experiment with Grid Layout and Quantity Queries.

See all tags.