Chrome – add insecure origins as secure

  1. Navigate to `chrome://flags/#unsafely-treat-insecure-origin-as-secure` in Chrome.
  2. Find and enable the `Insecure origins treated as secure` section (see below).
  3. Add any addresses you want to ignore the secure origin policy for. Remember to include the port number too (if required).
  4. Save and restart Chrome.

CSS Grid Layout Example – Visible Structure – Easy Tutorial

4 Items, stretched with different sizes across a Matrix 4×4 grid.

You can see the Grid structure in the CSS in this example.

Picture:

CSS:

.item-a {
    grid-area: itemA;
    border: 1px solid violet;
}
.item-b {
    grid-area: itemB;
    border: solid 1px cyan;
}
.item-c {
    grid-area: itemC;
    border: solid 1px yellow;
}
.item-d {
    grid-area: itemD;
    border: solid 1px red;
}

.container {
    height: 100%;
    border: solid 1px green;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas:
            "itemA itemA itemC itemC"
            "itemA itemA itemC itemC"
            "itemA itemA itemD itemD"
            "itemA itemA itemD itemD";

HTML (in this example a React JS Grid):

return (
        <Grid className={"container"}>
            <Grid item className={"item-a"}></Grid>
            <Grid item className={"item-b"}></Grid>
            <Grid item className={"item-c"}></Grid>
            <Grid item className={"item-d"}></Grid>
        </Grid>
    );