In CSS Grid Why Is 1Fr+9Fr Not Behaving the Same as 10Fr in Small Screen Sizes

In CSS Grid why is 1FR+9FR not behaving the same as 10FR in small screen sizes?

Add min-width:0 to input and you should fix the percentage value so they are exacltly the same as the fr. You have 31fr so 1fr is about 100/31 = 3.225%

.A {

  grid-area: a;

}

.B {

  grid-area: b;

}

.C {

  grid-area: c;

}

.Exchange_Row {

  display: grid;

  grid-template-columns: 1fr 9fr 10fr 10fr 1fr;

  grid-template-areas: "a a b c ."

}

.Exchange_Row.percentage {

 grid-template-columns:  3.225% 29.03% 32.25% 32.25% 3.225%;

}

input[type=text] {

  border: solid;

  min-width:0;

}

<div style="width: 90%; border: solid; border-radius: 5px; padding: 5px;">

  <div id="currencyRow" class="Exchange_Row">

    <input type="text" class="A" value="A" />

    <input type="text" class="B" value="B" />

    <input type="text" class="C" value="C" />

  </div>

</div>

<div style="width: 90%; border: solid; border-radius: 5px; padding: 5px;">

  <div id="currencyRow" class="Exchange_Row percentage">

    <input type="text" class="A" value="A" />

    <input type="text" class="B" value="B" />

    <input type="text" class="C" value="C" />

  </div>

</div>

CSS Grid: grid-row/column-start/end VS grid-area + grid-template-area

There seems to be two ways of deciding how many cells a grid item spans:

To be more precise there are 3 ways to place items. From the specification:

The contents of the grid container are organized into individual grid items (analogous to flex items), which are then assigned to predefined areas in the grid. They can be explicitly placed using coordinates through the grid-placement properties or implicitly placed into empty areas using auto-placement. §8 Placing Grid Items

So either you consider area, coordinate or you leave the job to the browser for the auto placement. Basically you can use only one way.

Note that grid-area is the shorthand property for the explicit placement which can also be replace by grid-row-start; grid-column-star; grid-row-end; grid-column-end;

Here is a simple example to illustrate:

.grid {
  display:inline-grid;
  grid-template-areas:
    "a b"
    "c d";
  grid-gap:20px;
  border:1px solid;
}
span {
  width:50px;
  height:50px;
  background:red;
}
.one > span {
  grid-area:a;
  grid-row-start:1;
  grid-row-end:3;
  grid-column-start:1;
  grid-column-end:3;
}
.two > span {
  grid-row-start:1;
  grid-row-end:3;
  grid-column-start:1;
  grid-column-end:3;
  grid-area:a;
}

<div class="grid one">
  <span></span>
</div>

<div class="grid two">
  <span></span>
</div>

Specify number of columns and still have row wrap in CSS Grid

You cannot specify a fixed number of tracks with auto-fill or auto-fit.

§ 7.2.2.2. Repeat-to-fill: auto-fill and auto-fit
repetitions

When auto-fill or auto-fit is given as the repetition number, if the grid
container has a definite size or max size in the relevant axis, then
the number of repetitions is the largest possible positive integer
that does not cause the grid to overflow its grid container.

If any number of repetitions would overflow, then 1 repetition.

The best way to achieve your layout, considering the limitations of the current (Level 1) version of CSS Grid, is with flexbox (demo), which comes with its own set of limitations, or with the crude and inelegant power of good old-fashioned media queries.

HTML grid layout disrupted by SVG child element

It turns out that the problem is not with the svg element at all, but with its containing div (.main in the question's code snippet). Like flex items, grid items have a default min-width: auto and min-height: auto. By setting them to 0, the svg is able to size automatically, as it should.

I still don't quite understand why the svg disrupted the layout, especially when it was set to 80% in Firefox, leaving conspicuous space around it, but the problem with the grid layout itself is clear enough.

    * {

      box-sizing: border-box;

      margin: 0;

      padding: 0;

    }

    body {

      display: grid;

      grid-template-columns: 3fr 9fr 2fr;

      grid-template-rows: 1fr 10fr 1fr;

      width: 100vw;

      height: 100vh;

    }

    div {

      border: solid black 1px; // to show div positions

    }

    .header {

      grid-column: 1 / 4;

      grid-row: 1;

    }

    .main {

      grid-column: 2;

      grid-row: 2;

      min-width: 0;

      min-height: 0;

    }

    .side1 {

      grid-column: 1;

      grid-row: 2;

    }

    .side2 {

      grid-column: 3;

      grid-row: 2;

    }

    .footer {

      grid-column: 1 / 4;

      grid-row: 3;

    }

    svg {

      max-height: 100%; 

      max-width: 100%;

    }

<body>

  <div class="header">Header</div>

  <div class="side1">Site 1</div>

  <div class="main">

    <svg viewBox="0 0 500 500"></svg>

  </div>

  <div class="side2">Site 2</div>

  <div class="footer">Footer</div>

</body>

ASP.NET MVC - Hiding a panel when model is not available

As I said in my comment, you should not be using a <asp:panel> in your asp.net application.

Instead, build a partial view (ascx)

<% if(! Model.HasValue){ %>
    <%: Html.Partial("WhatWouldGoInYourPanel") %>
<% } %>

Then in your Partial view, you can put all the "stuff" that you want to show if the Model is empty.

You can put the partial in one of two places. If it's shared, you put it in the Views/Shared folder. If it's specific to the Controller, you put it in the Views/[ControllerName] folder.

note: please forgive my C#... I'm not all that good.

---

Related Topics