I&#39;m trying to create a simple page with CSS Grid.

What I&#39;m failing to do is center the text from the HTML to the respective grid cells.

I&#39;ve tried placing content in separate `div`s both inside and outside of the `left_bg` and `right_bg` selectors and playing with some of the CSS properties to no avail.

How do I do this?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    html,
    body {
      margin: 0;
      padding: 0;
    }

    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 100vh;
      grid-gap: 0px 0px;
    }

    .left_bg {
      display: subgrid;
      background-color: #3498db;
      grid-column: 1 / 1;
      grid-row: 1 / 1;
      z-index: 0;
    }

    .right_bg {
      display: subgrid;
      background-color: #ecf0f1;
      grid-column: 2 / 2;
      grid_row: 1 / 1;
      z-index: 0;
    }

    .left_text {
      grid-column: 1 / 1;
      grid-row: 1 / 1;
      position: relative;
      z-index: 1;
      justify-self: center;
      font-family: Raleway;
      font-size: large;
    }

    .right_text {
      grid-column: 2 / 2;
      grid_row: 1 / 1;
      position: relative;
      z-index: 1;
      justify-self: center;
      font-family: Raleway;
      font-size: large;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;container&quot;&gt;
      &lt;!--everything on the page--&gt;

      &lt;div class=&quot;left_bg&quot;&gt;
        &lt;!--left background color of the page--&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;right_bg&quot;&gt;
      &lt;!--right background color of the page--&gt;
    &lt;/div&gt;

    &lt;div class=&quot;left_text&quot;&gt;
      &lt;!--left side text content--&gt;
      &lt;p&gt;Review my stuff&lt;/p&gt;

      &lt;div class=&quot;right_text&quot;&gt;
        &lt;!--right side text content--&gt;
        &lt;p&gt;Hire me!&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



Centering in CSS Grid

**TL;DR:** Is there anything like `table-layout: fixed` for CSS grids?

---

I tried to create a year-view calendar with a big 4x3 grid for the months and therein nested 7x6 grids for the days.

The calendar should fill the page, so the year grid container gets a width and height of 100% each.

    .year-grid {
      width: 100%;
      height: 100%;

      display: grid;
      grid-template: repeat(3, 1fr) / repeat(4, 1fr);
    }

    .month-grid {
      display: grid;
      grid-template: repeat(6, 1fr) / repeat(7, 1fr);
    }


Here&#39;s a working example: https://codepen.io/loilo/full/ryXLpO/

For simplicity, every month in that pen there has 31 days and starts on a Monday. 

I also chose a ridiculously small font size to demonstrate the problem:

Grid items (= day cells) are pretty condensed as there are several hundreds of them on the page. And as soon as the day number labels become too large (feel free to play around with the font size in the pen using the buttons on the upper left) the grid will just grow in size and exceed the page&#39;s body size.

Is there any way to prevent this behaviour?

I initially declared my year grid to be 100% in width and height so that&#39;s probably the point to start at, but I couldn&#39;t find any grid-related CSS properties that would&#39;ve fitted that need.

*Disclaimer:* I&#39;m aware that there are pretty easy ways to style that calendar just without using CSS Grid Layout. However, this question is more about the general knowledge on the topic than solving the concrete example.


Prevent content from expanding grid items

Is it possible to make a CSS grid wrap without using media queries?

In my case, I have a non-deterministic number of items that I want placed in a grid and I want that grid to wrap. Using Flexbox, I&#39;m unable to reliably space things nicely. I&#39;d like to avoid a bunch of media queries too.

Here&#39;s [some sample code](https://codepen.io/kentcdodds/pen/MpZKgx):

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .grid {
      display: grid;
      grid-gap: 10px;
      grid-auto-flow: column;
      grid-template-columns: 186px 186px 186px 186px;
    }

    .grid &gt; * {
      background-color: green;
      height: 200px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;grid&quot;&gt;
      &lt;div&gt;1&lt;/div&gt;
      &lt;div&gt;2&lt;/div&gt;
      &lt;div&gt;3&lt;/div&gt;
      &lt;div&gt;4&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

And here&#39;s a GIF image:

[![GIF image of what I&#39;m seeing][1]][1]

As a side-note, if anyone can tell me how I could avoid specifying the width of all the items like I am with `grid-template-columns` that would be great. I&#39;d prefer the children to specify their own width.

  [1]: https://i.stack.imgur.com/1I4gN.gif



CSS grid wrapping

I need to implement a masonry layout. However, for a number of reasons I don&#39;t want to use JavaScript to do it. 

[![A grid of multiple columns of rectangles of varying height.][1]][1]

Parameters:

- All elements have the same width
- Elements have a height that cannot be calculated server side (an image plus various amounts of text)
- I can live with a fixed number of columns if I have to

there is a trivial solution to this that works in modern browsers, [the `column-count` property.][2] 

The problem with that solution is that elements are ordered in columns:

[![Starting from the top leftmost box, they&#39;re numbered 1 through 4 straight down, the topmost box in the next column is 5, and so on.][3]][3]

While I need the elements to be ordered in rows, at least approximately:

[![Starting from the top leftmost box, they&#39;re numbered 1 through 6 straight across, but because box 5 is the shortest the box underneath it is 7 as it has the appearance of being on a row higher than the next box on the far left.][4]][4]

Approaches I&#39;ve tried that don&#39;t work:

 - Making items `display: inline-block`: [wastes vertical space.][5]
 - Making items `float: left`: [lol, no.][6]

Now I *could* change the server side rendering and reorder the items dividing the number of items by the number of columns, but that&#39;s complicated, error-prone (based on how browsers decide to split the item list into columns), so I&#39;d like to avoid it if possible.

Is there some flexbox magic that makes this possible?


  [1]: https://i.stack.imgur.com/Z25DI.png
  [2]: http://w3bits.com/labs/css-masonry/
  [3]: https://i.stack.imgur.com/uRAHy.png
  [4]: https://i.stack.imgur.com/d991Y.png
  [5]: https://jsfiddle.net/p0czqdz0/7/
  [6]: https://jsfiddle.net/p0czqdz0/8/

CSS-only masonry layout

I gather that this is impossible to achieve using Flexbox, as each row can only be the minimal height required to fit its elements, but can this be achieved using the newer CSS Grid?

To be clear, I want equal height for all elements in a grid across all rows, not just per each row. Basically, the highest &quot;cell&quot; should dictate the height of all cells, not just the cells in its row. 


Equal height rows in CSS Grid Layout

I want my grid to fill in vertically like this:

    1 4 7 
    2 5 8
    3 6 9
    ... arbitrary number of additional rows.

Instead, it fills in horizontally like this:

    1 2 3
    4 5 6
    7 8 9

**I want to specify the number of columns in my grid, not the number of rows.**

This is what my div looks like with inline CSS styling:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;div style=&quot;display:grid; grid-template-columns:1fr 1fr 1fr;&quot;&gt;
      &lt;div&gt;1&lt;/div&gt;
      &lt;div&gt;2&lt;/div&gt;
      &lt;div&gt;3&lt;/div&gt;
      &lt;div&gt;4&lt;/div&gt;
      &lt;div&gt;5&lt;/div&gt;
      &lt;div&gt;6&lt;/div&gt;
      &lt;div&gt;7&lt;/div&gt;
      &lt;div&gt;8&lt;/div&gt;
      &lt;div&gt;9&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;


It&#39;s important that my grid be 3 columns wide, but I want the items to be populated by column, not by row. Is this possible in CSS Grid? I&#39;ve read through this https://css-tricks.com/snippets/css/complete-guide-grid/ but didn&#39;t see anything about order.

CSS Flexbox has `flex-direction`, isn&#39;t there an attribute like that for CSS Grid?

Make grid container fill columns not rows

I&#39;d like to have the html below showing in n equal columns whether there are two, or three, or more child elements to the row element using css grid - Flexbox makes this easy but I cannot get it done using css grid - any help is appreciated.

    &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;



Equal width columns in CSS Grid

What I wanna do is to make a [CSS grid][1] with a dynamic number of cells. For the sake of simplicity, let&#39;s assume there will always be four cells per row. Can I specify a grid with such a dynamic number of rows?

To make it easier, here&#39;s the Flexbox implementation: 

&lt;!-- begin snippet: js hide: false console: true babel: true --&gt;

&lt;!-- language: lang-js --&gt;

    const COLORS = [
      &#39;#FE9&#39;,
      &#39;#9AF&#39;,
      &#39;#F9A&#39;,
      &quot;#AFA&quot;,
      &quot;#FA7&quot;
    ];

    function addItem(container, template) {
      let color = COLORS[_.random(COLORS.length - 1)];
      let num = _.random(10000);
      
      container.append(Mustache.render(template, { color, num }));
    }

    $(() =&gt; {
      const tmpl = $(&#39;#item_template&#39;).html()
      const container = $(&#39;#app&#39;);
      
      for(let i=0; i&lt;5; i++) { addItem(container, tmpl); }
      
      $(&#39;#add_el&#39;).click(() =&gt; {
        addItem(container, tmpl);
      })
      
      container.on(&#39;click&#39;, &#39;.del_el&#39;, (e) =&gt; {
        $(e.target).closest(&#39;.item&#39;).remove();
      });
    });

&lt;!-- language: lang-css --&gt;

    .container {
      width: 100%;
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-start;
    }
    .container .item {
      flex: 0 0 calc(25% - 1em);
      min-height: 120px;
      margin: 0.25em 0.5em;
    }


&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;div id=&quot;app&quot; class=&quot;container&quot;&gt;
    &lt;/div&gt;

    &lt;button id=&quot;add_el&quot;&gt;Add element&lt;/button&gt;

    &lt;template id=&quot;item_template&quot;&gt;
      &lt;div class=&quot;item&quot; style=&quot;background: {{color}}&quot;&gt;
        &lt;p&gt;{{ num }}&lt;/p&gt;
        &lt;p&gt;
          &lt;button class=&quot;del_el&quot;&gt;Delete&lt;/button&gt;
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/template&gt;

&lt;!-- end snippet --&gt;

**P.S.** Apparently, I wasn&#39;t clear enough the first time... I want to recreate this effect using the latest [CSS Grid Layout.][1]

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout


Can I make a CSS grid with dynamic number of rows or columns?

I&#39;m trying to center inner elements of a `&lt;button&gt;`-tag with flexbox&#39;s `justify-content: center`. But Safari does not center them. I can apply the same style to any other tags and it works as intended (see the `&lt;p&gt;`-tag). Only the button is left-aligned.

Try Firefox or Chrome and you can see the difference.

Is there any user agent style I have to overwrite? Or any other solution to this problem?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    div {
      display: flex;
      flex-direction: column;
      width: 100%;
    }
    button, p {
      display: flex;
      flex-direction: row;
      justify-content: center;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div&gt;
      &lt;button&gt;
        &lt;span&gt;Test&lt;/span&gt;
        &lt;span&gt;Test&lt;/span&gt;
      &lt;/button&gt;
      &lt;p&gt;
        &lt;span&gt;Test&lt;/span&gt;
        &lt;span&gt;Test&lt;/span&gt;
      &lt;/p&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

And a jsfiddle:
http://jsfiddle.net/z3sfwtn2/2/

Flex / Grid layouts not working on button or fieldset elements

How do I force a css grid container take the full width and height of the device screen for a single page app? Modified example is from Mozilla: [Firefox documentation][1]

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .wrapper {
      display: grid;
      border-style: solid;
      border-color: red;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      grid-gap: 10px;
    }
    .one {
      border-style: solid;
      border-color: blue;
      grid-column: 1 / 3;
      grid-row: 1;
    }
    .two {
      border-style: solid;
      border-color: yellow;
      grid-column: 2 / 4;
      grid-row: 1 / 3;
    }
    .three {
      border-style: solid;
      border-color: violet;
      grid-row: 2 / 5;
      grid-column: 1;
    }
    .four {
      border-style: solid;
      border-color: aqua;
      grid-column: 3;
      grid-row: 3;
    }
    .five {
      border-style: solid;
      border-color: green;
      grid-column: 2;
      grid-row: 4;
    }
    .six {
      border-style: solid;
      border-color: purple;
      grid-column: 3;
      grid-row: 4;
    }


&lt;!-- language: lang-html --&gt;

    &lt;html&gt;
    &lt;div class=&quot;wrapper&quot;&gt;
      &lt;div class=&quot;one&quot;&gt;One&lt;/div&gt;
      &lt;div class=&quot;two&quot;&gt;Two&lt;/div&gt;
      &lt;div class=&quot;three&quot;&gt;Three&lt;/div&gt;
      &lt;div class=&quot;four&quot;&gt;Four&lt;/div&gt;
      &lt;div class=&quot;five&quot;&gt;Five&lt;/div&gt;
      &lt;div class=&quot;six&quot;&gt;Six&lt;/div&gt;
    &lt;/div&gt;
    &lt;/html&gt;


&lt;!-- end snippet --&gt;
I&#39;m not sure what to do to get this code to work.  Any ideas/suggestions would be appreciated.

  [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

force css grid container to fill full screen of device

I&#39;m really confused. When looking for online resources and documentation, most of the documentation of these properties seem to reference Flex-box, not grid. And I don&#39;t know how applicable the documentation for the equivalent properties in Flex-box is to grid.

So, I&#39;ve tried referencing https://css-tricks.com/snippets/css/complete-guide-grid/, which defines them as follows:

   **justify-items** - Aligns the content inside a grid item along the row axis

   **justify-content** - This property aligns the grid along the row axis

   **justify-self** - Aligns the content inside a grid item along the row axis

But I still don&#39;t understand what the difference between them is. So, I have 3 questions I want to clarify.

 1. Is the `justify-items` property in Flex-box the same as the
    `justify-items` property in Grid? or are they different somehow?
    (In other words, can I reuse Flex-box documentation for Grid)
 2. What do (justify-)content, self and items do?
 3. How are (justify-)content, self and items different?

Any clarification would be greatly appreciated.

**Edit:** Since everyone keeps giving me Flex-box resources, I am asking about css-grid, NOT flex-box.

What is difference between justify-self, justify-items and justify-content in CSS grid?

Is it possible to select a specific grid column or row with CSS?

For example, say I have a 3 row by 2 column CSS Grid Layout: `grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;`. How would I select all elements from the 2nd column? For example: `grid:nth-child(column:2)` (just my idea, not valid code).

I have tried `nth-child` selectors on the `div` elements, but this does not allow me to specify row or column when the items are automatically placed by the Grid Layout engine.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    body {
      display: grid;
      grid-template-rows: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr;
      grid-gap: 10px;
    }

    .item {
      background: #999;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;item&quot;&gt;
      &lt;p&gt;Customer Name&lt;/p&gt;
      &lt;p&gt;Element 1 | Element 2&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class=&quot;item&quot;&gt;
      &lt;p&gt;Right Justify&lt;/p&gt;
      &lt;p&gt;Element 1 | Element 2&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class=&quot;item&quot;&gt;
      &lt;p&gt;Customer Name&lt;/p&gt;
      &lt;p&gt;Element 1 | Element 2&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class=&quot;item&quot;&gt;
      &lt;p&gt;Customer Name&lt;/p&gt;
      &lt;p&gt;Element 1 | Element 2&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;item&quot;&gt;
      &lt;p&gt;Customer Name&lt;/p&gt;
      &lt;p&gt;Element 1 | Element 2&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;item&quot;&gt;
      &lt;p&gt;Customer Name&lt;/p&gt;
      &lt;p&gt;Element 1 | Element 2&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;item&quot;&gt;
      &lt;p&gt;Customer Name&lt;/p&gt;
      &lt;p&gt;Element 1 | Element 2&lt;/p&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



How to target a specific column or row in CSS Grid Layout?

I have a CSS Grid Layout in which I want to make **some** (middle 3) rows stretch to their maximum size. I&#39;m probably looking for a property similar to what `flex-grow: 1` does with Flexbox but I can&#39;t seem to find a solution.

&gt; Note: This is intended for an [Electron][1] app only, so browser compatibility is not really a concern.

I have the following CSS Grid Layout:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .grid {
      display: grid;
      grid-template-columns: 1fr 1.5fr 1fr;
      grid-gap: 10px;
      height: calc(100vh - 10px);
    }

    .grid .box {
      background-color: grey;
    }

    .grid .box:first-child,
    .grid .box:last-child {
      grid-column-start: 1;
      grid-column-end: -1;
    }

    /* These rows should &#39;grow&#39; to the max height available. */
    .grid .box:nth-child(n+5):nth-child(-n+7) {
      grid-column-start: 1;
      grid-column-end: -1;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;grid&quot;&gt;
      &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

Which creates the following grid:

[![Current Grid][2]][2]

&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
When none of the boxes contain any content I would like the grid to look something like this:

[![Preferred Grid][3]][3]


  [1]: http://electron.atom.io/
  [2]: https://i.stack.imgur.com/asSZw.png
  [3]: https://i.stack.imgur.com/iLhJE.png

How do I specify row heights in CSS Grid layout?

So I have this grid:

    +---------+------------------------------+---------+    
    |  &lt;div&gt;  |  &lt;p&gt; - 1000 characters long  |  &lt;div&gt;  |
    +---------+------------------------------+---------+

Inside `p` there&#39;s super long string with no spaces. `div`s are placeholders with fixed dimensions.
This produces the above:
    
      display: grid;
      grid-auto-flow: column;
      grid-template-columns: auto minmax(0, 1fr) auto;

But changing `minmax(0, 1fr)` to `1fr` gives this:

    +---------+----------------------------------------+    
    |  &lt;div&gt;  |               &lt;p&gt; - 1000 characters long  |  &lt;div&gt;  |
    +---------+----------------------------------------+

It overflows out of its parent and way out of screen size. Why isn&#39;t it behaving like minmax?

[Codepen](https://codepen.io/anon/pen/MPQZGB)

Why does minmax(0, 1fr) work for long elements while 1fr doesn&#39;t?

Given the current CSS grid example, how can I collapse the borders in order to avoid the double borders ?

This is such a simple thing to achieve using an Html table. How do I do it using `display: grid` ?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .wrapper {
      display: grid;
      grid-template-columns: 50px 50px 50px 50px;
    }

    .wrapper &gt; div {
      padding: 15px;
      text-align: center;
      border: 1px solid black;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;wrapper&quot;&gt;
      &lt;div&gt;1&lt;/div&gt;
      &lt;div&gt;2&lt;/div&gt;
      &lt;div&gt;3&lt;/div&gt;
      &lt;div&gt;4&lt;/div&gt;
      &lt;div&gt;5&lt;/div&gt;
      &lt;div&gt;6&lt;/div&gt;
      &lt;div&gt;7&lt;/div&gt;
      &lt;div&gt;8&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



Preventing double borders in CSS Grid

I&#39;m using following HTML markup for my grid.

    &lt;section class=&quot;grid&quot;&gt;
        &lt;article class=&quot;grid-item width-2x height-2x&quot;&gt;....&lt;/article&gt;
        &lt;article class=&quot;grid-item&quot;&gt;....&lt;/article&gt;
        &lt;article class=&quot;grid-item&quot;&gt;....&lt;/article&gt;
        &lt;article class=&quot;grid-item width-2x&quot;&gt;....&lt;/article&gt;
        &lt;article class=&quot;grid-item height-2x&quot;&gt;....&lt;/article&gt;
        &lt;article class=&quot;grid-item&quot;&gt;....&lt;/article&gt;
        &lt;article class=&quot;grid-item&quot;&gt;....&lt;/article&gt;
        &lt;article class=&quot;grid-item width-2x height-2x&quot;&gt;....&lt;/article&gt;
    &lt;/section&gt;

The SCSS code is something like below:

    .grid {
    	display: grid;
    	grid-template-columns: repeat( 4, 1fr );
    	grid-gap: 30px;
    	align-items: start;
    
    	.grid-item {
    		&amp;.height-2x {
    			grid-row: span 2;
    		}
    		&amp;.width-2x {
    			grid-column: span 2;
    		}
    	}
    }

Since I&#39;m using auto-prefixer in my workflow it automatically adds all relevant properties with `-ms` prefix. I can confirm it via inspect element.

Now, the issue is this code works just fine in Chrome, Firefox and Opera, but when I open this page in Microsoft Edge or in IE 11 all grid items are overlapping each other at first cell. According to [this site][1] these browsers support CSS Grid layout with `-ms` prefix. I&#39;ve created a CodePen for this scenario.

[CodePen Link][2]

Why is it not working?

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .grid {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
      -ms-grid-rows: (270px)[4];
      grid-template-rows: repeat(4, 270px);
      grid-gap: 30px;
    }

    .grid .grid-item {
      background-color: #000;
      color: #fff;
      text-align: center;
      line-height: 270px;
    }

    .grid .grid-item.height-2x {
      -ms-grid-row: span 2;
      grid-row: span 2;
    }

    .grid .grid-item.width-2x {
      -ms-grid-column: span 2;
      grid-column: span 2;
    }

&lt;!-- language: lang-html --&gt;

    &lt;section class=&quot;grid&quot;&gt;
      &lt;article class=&quot;grid-item width-2x height-2x&quot;&gt;....&lt;/article&gt;
      &lt;article class=&quot;grid-item&quot;&gt;....&lt;/article&gt;
      &lt;article class=&quot;grid-item&quot;&gt;....&lt;/article&gt;
      &lt;article class=&quot;grid-item width-2x&quot;&gt;....&lt;/article&gt;
      &lt;article class=&quot;grid-item height-2x&quot;&gt;....&lt;/article&gt;
      &lt;article class=&quot;grid-item&quot;&gt;....&lt;/article&gt;
      &lt;article class=&quot;grid-item&quot;&gt;....&lt;/article&gt;
      &lt;article class=&quot;grid-item width-2x height-2x&quot;&gt;....&lt;/article&gt;
    &lt;/section&gt;

&lt;!-- end snippet --&gt;


  [1]: http://caniuse.com/#feat=css-grid
  [2]: https://codepen.io/imfaisal/full/rzdzqN/

CSS Grid Layout not working in IE11 even with prefixes

Is there a way to style more than just the width of the grid gaps within the CSS grid layout module? I can&#39;t find anything about it in the documentation, however one would tend to think that it would be possible as grid gaps tend to be colored in many designs. If it is not possible, is there a workaround?

CSS Grid: Is it possible to apply color to grid gaps?

With the CSS Grid Layout Module soon shipping in Firefox and Chrome, I thought that I&#39;d try to get a handle of how to use it.

I&#39;ve tried to create a simple grid with one item `a` spanning the left side of all of the rows, with the other items (`b`, `c`, `d`, `e`, etc.) spanning the right side of individual rows. The amount of items spanning the right side of the rows is variable, so there might be any combination of `b`, `c`, `d`, `e`, etc., so I&#39;m using the `grid-auto-rows` property. As such, I cannot define a fixed number of rows for `a` to span, but I would like `a` to span *all* available rows.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    #container {
        display: grid;
        grid-auto-flow: column;
        grid-auto-rows: auto;
        grid-template-columns: [left] 4rem [right] 1fr;
        margin: 0rem auto;
        max-width: 32rem;
    }
    #a {
        background: lightgreen;
        grid-column: left;
        grid-row: 1 / auto;
        justify-self: center;
    }
    #b {
        grid-area: auto / right;
        background: yellow;
    }
    #c {
        grid-area: auto / right;
        background: pink;
    }
    #d {
        grid-area: auto / right;
        background: lightskyblue;
    }
    #e {
        background: plum;
        grid-area: auto / right;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;container&quot;&gt;
        &lt;div id=&quot;a&quot;&gt;a&lt;/div&gt;
        &lt;div id=&quot;b&quot;&gt;b&lt;/div&gt;
        &lt;div id=&quot;c&quot;&gt;c&lt;/div&gt;
        &lt;div id=&quot;d&quot;&gt;d&lt;/div&gt;
        &lt;div id=&quot;e&quot;&gt;e&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

What should I do to make `a` span all rows without knowing how many rows there will end up being?

Items that span all columns/rows using CSS grid layout

I was hoping to use CSS Grid to reverse the apparent order of two side-by-side divs, where one of the divs grows arbitrarily (I don&#39;t want to use floats).  

I&#39;ve created a plunkr here: http://plnkr.co/edit/6WZBnHbwhD7Sjx2ovCO7?p=preview

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    #container {
      grid-template-columns: 240px 1fr;
      display: grid;
    }

    .a {
      background: yellow;
    }

    .b {
      background: blue;
      color: white;
    }

    #container&gt;.a {
      grid-column: 1;
    }

    #container&gt;.b {
      grid-column: 2;
    }

    #container.reverse&gt;.a {
      grid-column: 2;
    }

    #container.reverse&gt;.b {
      grid-column: 1;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;container&quot; class=&quot;reverse&quot; style=&quot;width: 800px;&quot;&gt;
      &lt;div class=&quot;a&quot;&gt;A&lt;/div&gt;
      &lt;div class=&quot;b&quot;&gt;B&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

The crux of it is that when I have the `.reverse` class applied (so that you should see `B | A`), `B` is offset to a new line so it looks more like:

              | A
    B

If I invert the document ordering of `.a` with `.b`, this goes back to normal (but of course, if I drop the `.reverse` class, I get the same problem).

Why is this, and how can I address?

Reverse order of columns in CSS Grid Layout

I am using CSS grid to layout some items like this...

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    #container {
      display: grid;
      grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%;
    }

    .item {
      background: teal;
      color: white;
      padding: 20px;
      margin: 10px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;container&quot;&gt;
      &lt;div class=&quot;item&quot;&gt;Item&lt;/div&gt;
      &lt;div class=&quot;item&quot;&gt;Item&lt;/div&gt;
      &lt;div class=&quot;item&quot;&gt;Item&lt;/div&gt;
      &lt;div class=&quot;item&quot;&gt;Item&lt;/div&gt;
      &lt;div class=&quot;item&quot;&gt;Item&lt;/div&gt;
      &lt;div class=&quot;item&quot;&gt;Item&lt;/div&gt;
      &lt;div class=&quot;item&quot;&gt;Item&lt;/div&gt;
      &lt;div class=&quot;item&quot;&gt;Item&lt;/div&gt;
      &lt;div class=&quot;item&quot;&gt;Item&lt;/div&gt;
      &lt;div class=&quot;item&quot;&gt;Item&lt;/div&gt;
      &lt;div class=&quot;item&quot;&gt;Item&lt;/div&gt;
      &lt;div class=&quot;item&quot;&gt;Item&lt;/div&gt;
      &lt;div class=&quot;item&quot;&gt;Item&lt;/div&gt;
      &lt;div class=&quot;item&quot;&gt;Item&lt;/div&gt;
      &lt;div class=&quot;item&quot;&gt;Item&lt;/div&gt;
      &lt;div class=&quot;item&quot;&gt;Item&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

How can I get the last row to be centered instead of left aligned?  I can&#39;t guarantee the number of items so want to make the layout look right for any number of items.

Is this something I should be using flexbox for instead?  Or are CSS grids a suitable use?

How to center elements on the last row in CSS Grid?

I have two grids nested within a grid. Unfortunately the right nested grid `.grid-3` sets the height of the rows so that both the left and right grid are the same height, the extra space is shared among the divs with the class `.right`. How can I set the rows of the right nested grid to adjust to the size of the content, so they are the same height as the left nested rows? 

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    div {
      border: 1px dotted black;
    }
    .grid-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows auto;
    }

    .grid-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-auto-rows auto;
    }

    .left {
      background-color: red;
    }
     
    .right {
      background-color: green;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;grid-2&quot;&gt;
          &lt;div class=&quot;grid-2&quot;&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
         &lt;/div&gt;
         &lt;div class=&quot;grid-3&quot;&gt;
             &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
         &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



CSS Grid - Auto height rows, sizing to content

I looked at the documentation but did not find such property.
I want to fit all cells in one column to its content width using css grid.

For the first case I should apply this property for the container: `grid-template-columns: auto auto;`

But what should I do for the second case?

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/JQPkG.jpg

Set column width to content length in CSS Grid

**What I want to achieve:** 

Using [CSS Grid Layout][1], to have a page with a right column which size is derived from its content, but only up to 20% of the window width. 

**How I thought it would work:**

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    div {
      border-style: solid;
    }

    #container {
      width: 300px;
      height: 300px;
      display: grid;
      grid-template-columns: 1fr minmax(auto, 20%);
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;container&quot;&gt;
      &lt;div&gt;
        some content
      &lt;/div&gt;
      &lt;div&gt;
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus eu leo ac ultrices. Vivamus ornare, orci sed pretium sollicitudin
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

It looks good, but then when I remove the content of the second `div`, the left column does not collapse:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    div {
      border-style: solid;
    }

    #container {
      width: 300px;
      height: 300px;
      display: grid;
      grid-template-columns: 1fr minmax(auto, 20%);
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;container&quot;&gt;
      &lt;div&gt;
        some content
      &lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

**My question:**

I was under the impression that since [`minmax()`][2] 

&gt; (...) defines a size range greater than or equal to min and less than
&gt; or equal to max.

it would mean that in my case the width is set from `auto` (= `0` when the `div` is empty) to `20%`. It however stays at 20%. Why is it so?


  [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
  [2]: https://developer.mozilla.org/en-US/docs/Web/CSS/minmax

How to set the maximum width of a column in CSS Grid Layout?

I am trying to get my sticky header to have a transition effect so it eases in rather than just a snap movement.

What am I doing wrong?

Here&#39;s my a working version:

http://codepen.io/juanmata/pen/RVMbmr

Basically the following code adds the class tiny to my wrapper class, this works fine.

    $(window).on(&#39;load&#39;, function() {
        $(window).on(&quot;scroll touchmove&quot;, function () {
            $(&#39;.wrapper&#39;).toggleClass(&#39;tiny&#39;, $(document).scrollTop() &gt; 0);
        });
    });

Here&#39;s the CSS part:

    .wrapper {
	    grid-template-rows: 80px calc(75vh - 80px) 25vh 80px;
        -o-transition: all 0.5s;
	    -moz-transition: all 0.5s;
	    -webkit-transition: all 0.5s;
	    transition: all 0.5s;
    }
    .tiny {
	    grid-template-rows: 40px calc(75vh - 40px) 25vh 80px;
    }

So the header does shrink as it should but there is no animation, have I missed something or does transitions simply not work with grid?

Here&#39;s a link to the css-grid docs.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    $(window).on(&#39;load&#39;, function() {
      $(window).on(&quot;scroll touchmove&quot;, function() {
        $(&#39;.wrapper&#39;).toggleClass(&#39;tiny&#39;, $(document).scrollTop() &gt; 0);
      });
    });

&lt;!-- language: lang-css --&gt;

    * {
    	margin:0;
    	padding:0;
    }

    .wrapper {
    	display: grid;
    	grid-gap: 0px;
    	grid-template-columns: 1fr 1fr 1fr 1fr;
    	grid-template-rows: 80px calc(75vh - 80px) 25vh 80px;
    	grid-template-areas:
    		&quot;head head head head&quot;
    		&quot;main main main main&quot;
    		&quot;leader leader leader leader&quot;
    		&quot;foot foot foot foot&quot;;
    	background-color: #fff;
    	color: #444;
    }
    .tiny {
    	grid-template-rows: 40px calc(75vh - 40px) 25vh 80px;
    }
    .box {
    	background-color: #444;
    	color: #fff;
    	border-radius: 5px;
    	font-size: 150%;
    }
    .box .box {
    	background-color: lightcoral;
    }

    .head {
    	grid-area: head;
    	background-color: #999;
    	z-index: 2;
    	display: grid;
    	grid-gap: 0px;
    	grid-template-columns: 20% 1fr;
    	-o-transition: all 0.5s;
    	-moz-transition: all 0.5s;
    	-webkit-transition: all 0.5s;
    	transition: all 0.5s;
    	position: sticky;
    	top: 0;
    }

    .logo{
            height: inherit;
            grid-column: 1;
            grid-row: 1;
            background-color:red;
            position: relative;
            overflow: hidden;
        }
    .logo img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: block;
            max-width: 100%;
            height: auto;
        }
    .main {
    	grid-area: main;
    	/* CSS Grid */
    	z-index: 1;
    	grid-column: head-start / head-end;
    	grid-row: head-start / leader-start;
    	background-color: red;
    }
    .leader {
    	grid-area: leader;
    	z-index:1;
    	display: grid;
    	grid-gap: 0px;
    	grid-template-columns: repeat(4, 1fr  );
    }
    .foot {
    	grid-area: foot;
    	z-index:1;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;wrapper&quot;&gt;
      &lt;div class=&quot;box head&quot;&gt;
        &lt;div class=&quot;box logo&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;https://unsplash.it/200/300/?random&quot; /&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class=&quot;box nav&quot;&gt;nav&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;box main&quot;&gt;main&lt;/div&gt;
      &lt;div class=&quot;box leader&quot;&gt;
        &lt;div class=&quot;box leader-1&quot;&gt;1&lt;/div&gt;
        &lt;div class=&quot;box leader-2&quot;&gt;2&lt;/div&gt;
        &lt;div class=&quot;box leader-3&quot;&gt;3&lt;/div&gt;
        &lt;div class=&quot;box leader-4&quot;&gt;4&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;box foot&quot;&gt;foot&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



Using CSS transitions in CSS Grid Layout

I have a card built with CSS Grid layout. There might be an image to the left, some text to the right top and maybe a button or a link at the right bottom.

In the code below, how can I make the green area take up as much space as possible and at the same time make the blue area take up as little space as possible?

The green should push the blue area down as far as possible.

https://jsfiddle.net/9nxpvs5m/

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .grid {
      display: grid;
      grid-template-columns: 1fr 3fr;
      grid-template-areas:
        &quot;one two&quot;
        &quot;one three&quot;
    }

    .one {
      background: red;
      grid-area: one;
      padding: 50px 0;
    }

    .two {
      background: green;
      grid-area: two;
    }

    .three {
      background: blue;
      grid-area: three;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;grid&quot;&gt;
      &lt;div class=&quot;one&quot;&gt;
        One
      &lt;/div&gt;
      &lt;div class=&quot;two&quot;&gt;
        Two
      &lt;/div&gt;
      &lt;div class=&quot;three&quot;&gt;
        Three
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



How to make CSS Grid items take up remaining space?

Why do I have an overflow on the X axis in the following snippet?

The overflow is generated once I apply `grid-gap: 10px` on my `.body` grid container.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    div:not(.header):not(.body):not(.row) {
      border: 1px solid grey;
    }

    .header {
      margin-top: 20px;
      display: grid;
      grid-gap: 10px;
      grid-template-areas: &quot;header-left header-right-up&quot; &quot;header-left header-right-down&quot;;
      grid-template-rows: 40px 40px;
      grid-template-columns: minmax(50px, 200px) auto;
    }

    .header-left {
      grid-area: header-left;
    }

    .header-right-up {
      grid-area: header-right-up;
    }

    .header-right-down {
      grid-area: header-right-down;
    }

    .body {
      margin-top: 20px;
      display: grid;
      grid-template-columns: 25% 50% 25%;
      grid-auto-rows: 80px; 
      grid-gap: 10px;
    }

    .row-left {
    }

    .row-center {
    }

    .row-right {
    }


&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;header&quot;&gt;
      &lt;div class=&quot;header-left&quot;&gt;image&lt;/div&gt;
      &lt;div class=&quot;header-right-up&quot;&gt;content&lt;/div&gt;
      &lt;div class=&quot;header-right-down&quot;&gt;long content&lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;body&quot;&gt;
        &lt;div class=&quot;row-left&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;row-center&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;row-right&quot;&gt;&lt;/div&gt;

        &lt;div class=&quot;row-left&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;row-center&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;row-right&quot;&gt;&lt;/div&gt;

        &lt;div class=&quot;row-left&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;row-center&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;row-right&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

https://codepen.io/anon/pen/WdJExz?editors=1100

Why does grid-gap cause an overflow?

I am wanting to create a grid layout with responsive squares.

I feel like I should be able to do this with CSS Grid layout but having trouble setting the height of each square to be equal to the width.

Also having trouble setting a gutter between each square. 

Would I be better off using flexbox?

Currently my HTML looks like this but will be dynamic so more squares may be added. And of course it needs to be responsive so will ideally use a media query to collapse it to one column.

    &lt;div class=&quot;square-container&quot;&gt;
    
      &lt;div class=&quot;square&quot;&gt;
        &lt;div class=&quot;content&quot;&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    
      &lt;div class=&quot;square&quot;&gt;
        &lt;div class=&quot;content spread&quot;&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    
      &lt;div class=&quot;square&quot;&gt;
        &lt;div class=&quot;content column&quot;&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    
    &lt;/div&gt;


Using css grid, this is as far as I got

    .square-container{
    	display: grid;
    	grid-template-columns: 30% 30% 30%;
    	.square {
    		
    	}
    }

I was able to get a bit further with flexbox and able to use space-between to align squares with a nice gutter but was still struggling to get the height to match the width of each square.

I wasn&#39;t able to find any examples of this being done with either flexbox or grid but any examples would be appreciated as well. 

Thanks

A grid layout with responsive squares

I&#39;m having fun getting my head around the new CSS Grid spec, but I&#39;m running into trouble with borders. 

**Is it possible to collapse borders in a CSS Grid, or is there any way to style the gutter?**

As you can see in the snippet below, the `10px` borders stack (`20px` total) in-between blocks. 

I understand this issue isn&#39;t unique to CSS Grids, but I&#39;m hoping it&#39;ll allow for new solutions for creating a uniform 10px border between all boxes and on the outer edges.

My actual use-case is a calendar I&#39;m making to practice working with Grids and React components. You can see the issue I&#39;m running into here: 

![CSS Grid Calendar][1].

Since every month is different, I&#39;ll have a lot of different edge-cases to consider. 

&lt;!-- begin snippet: js hide: false console: false babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .container {
      display: grid;
      grid-template-columns: 120px 120px;
      box-sizing: border-box;
    }

    .block {
      width: 100px;
      height: 100px;
      background-color: lightgrey;
      border: 10px solid palegreen;
    }

    .first {
      grid-column: 2 / span 1;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&#39;container&#39;&gt;
      &lt;div class=&#39;block first&#39;&gt;1&lt;/div&gt;
      &lt;div class=&#39;block&#39;&gt;2&lt;/div&gt;
      &lt;div class=&#39;block&#39;&gt;3&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;


  [1]: https://i.stack.imgur.com/RrCX2.png

Collapsing borders using CSS Grid

I have a list of items that I&#39;m trying to arrange into a scrollable horizontal layout with flexbox.

Each item in the container has a margin left and right, but the right margin of the last item is being collapsed.

Is there a way to stop this happening, or a good workaround?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      display: flex;
      height: 300px;
      overflow: auto;
      width: 600px;
      background: orange;
    }
    ul li {
      background: blue;
      color: #fff;
      padding: 90px;
      margin: 0 30px;
      white-space: nowrap;
      flex-basis: auto;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;container&quot;&gt;
      &lt;ul&gt;
        &lt;li&gt;Item 1&lt;/li&gt;
        &lt;li&gt;Item 2&lt;/li&gt;
        &lt;li&gt;Item 3&lt;/li&gt;
        &lt;li&gt;Item 4&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



All Css Grid Solutions on Gang of Coders

Total of 29 Css Grid Solutions