Question

So let me start off by saying I’m not a designer by any means, I’ve tinkered with HTML and CSS a little bit here and there for various projects, but it has never been a full-time thing for me. However, I have been trying to study for the Microsoft HTML5 w/ Javascript and CSS3 exam lately using their official jump start videos, and I have run into a question that I cannot seem to find the answer to/interpret.

The question is:

How much space will my second column take if the definition of my grids is as follows:

.grid #mydivs > div{
            display: -ms-grid;
            -ms-grid-columns: 100px 1fr 100px;
            -ms-grid-rows: 100px 1fr 100px;
            width: 600px;
           height: 400px;
      }

Looking at it, I thought the answer would be 100px, but that seems to be incorrect. Could someone explain what the correct answer is here and how one might derive it? Much appreciated.

Answer 1

According to http://msdn.microsoft.com/en-us/library/windows/apps/hh466340.aspx, your second column will take 1fr (fraction) of the remaining width.
Knowing that your first column will use 100px and the last one 100px as well out of the total width of 600px:

The answer should be 1 fraction of 400px (600px - 100px - 100px) or 400px.