messes up formatting of css grid layout

CSS Grid layout encourages a somewhat special syntax where the lines of the rule represent the grid being described. For example this rule:

.item {
    grid-template-areas: 
        "header header"
        "main sidebar"
        "footer footer";
}

describes the grid areas for a 2-column, 3-row grid. You’d want to keep the formatting just like this because it’s easier to understand when it’s laid out the same way as the grid being described.

Same goes for the grid-template-columns, grid-template-rows, and grid-template properties. Another example:

.item {
    grid-template: 
        "a a a" 200px
        "b b b" 200px
        / 200px 200px auto;
}

Having it on separate lines like this makes it easier to understand which part of the CSS correlates to specific rows/columns.

Prettier currently concats everything to a single line, when ideally it should only handle indents and semicolons for these cases.

[keithjgrant]

(P.S. Don’t let all that craziness above deter you from learning CSS Grid. Basic use cases are much simpler and easy to pick up. You will never need near as much code as everything in the example above)

[keithjgrant]

Hah. I hope I do. I wrote a chapter on it 😜 (https://www.manning.com/books/css-in-depth)

Below are several examples for all property names that begin with grid. (There are other grid-related ones, like justify-content that don’t have grid in the name and can probably be formatted as normal).

.container {
  display: grid;
  
  /* basic template rows/columns */
  grid-template-columns: 1fr 100px 3em;
  grid-template-rows: 1fr 100px 3em;
  /* template rows/columns with named grid lines */
  grid-template-columns:
    [wide-start] 1fr
    [main-start] 500px
    [main-end] 1fr
    [wide-end];
  grid-template-rows:
    [top] 1fr
    [middle] 1fr
    [bottom];
  /* template rows/columns with functions */
  grid-template-columns: minmax(1em, 1fr) minmax(1em, 80ch) minmax(1em, 1fr);
  /* getting really busy with named lines + functions */
  grid-template-columns:
    [full-start] minmax(1em, 1fr)
    [main-start] minmax(1em, 80ch)
    [main-end] minmax(1em, 1fr)
    [full-end];

  grid-template-areas:
    "header header header"
    "main   main   sidebar"
    "main   main   sidebar2"
    "footer footer footer";

  /* Shorthand for grid-template-rows, grid-template-columns, and grid-template
     areas. In one. This can get really crazy. */
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;

  /* The. Worst. This one is shorthand for like everything here smashed into one.
      Rarely will you actually specify EVERYTHING, but obvs Prettier needs to
      have a plan. */
  grid: 
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
  /* simpler use case: */
  grid: 200px auto / 1fr auto 1fr;

  /* Okay, that's the worst of it. The simpler syntaxes: */

  grid-row-gap: 2em;
  grid-column-gap: 1em;
  /* shorthand for grid-row-gap + grid-column-gap: */
  grid-gap: 2em 1em;

  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
}

.container > .item {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: -2;
  grid-row-end: -1;

  /* shorthands for the above: */
  grid-column: 1 / 2;
  grid-column: main;
  grid-row: -2 / span 1;
  grid-row: footer;

  grid-area: main;
  grid-area: 1 / main-start / 3 / main-end;
}