As the global reliance on digital architecture keeps growing year by year, so does the need to properly secure it. Microservices are more common nowadays but they also provide a larger attack surface. In this blog post, Friso provides an overview of threats in this new field and he has identified and how to tackle them.
CSS Grid & troubleshooting
CSS Grid is a very useful tool that enables you to set up a layout quickly. No more wrestling with sometimes ‘fragile’ floats and clears or being restricted to working with one axis in Flexbox. Grid gives you control over both axes and it is versatile; you can use a Grid within a Grid, and you can also combine Grid with Flexbox.
If you want to know more about how Grid works, there are excellent guides around. For example:
You can use Firefox Developer Tools or Chrome / Edge DevTools to check the inner workings of your grid. They can tell you what is happening on the page. But what if something else goes wrong when you work with Grid? The layout is not working as you expected, and you want to fix this. But the tools only tell you what is happening on the page, not if something is wrong with the code. So where do you start? This post is an exploration of issues that I ran into while working with Grid and what possible causes you can check to solve them.
Maybe HTML is the problem
Is one div squished into another one like the Footer in figure 1? You possible haven’t structured your HTML right and by mistake included it with that div.
As you can see in the HTML file in the corresponding code snippet, the “footer” div is accidentally included within the “main” div. Close the “main” div before “footer”, and “footer” will take its intended place.
/* HTML figure 1 */
<body>
<div class="layout">
<div class="header flexdiv">
<p>Header</p>
</div>
<div class="sidebar flexdiv">
<p>Sidebar</p>
</div>
<div class="main flexdiv">
<p>Main</p>
<div class="footer flexdiv">
<p>Footer</p>
</div>
</div>
</div>
</body>
Named spaces go awry
Another sign that something is wrong with your Grid setup, is that the whole grid gets squished in the righthand lower corner as you can see in figure 2. Okay, something is clearly not right. But what can it be?
In figure 2 I set up the page using named spaces. That is a nice feature of Grid. You can sort of sketch the layout using the names of the spaces that you want to use. Just make sure that you also tell the corresponding HTML element that it should inhabit this area, otherwise it will not show up. See an example of a named spaces setup in the following code snippet.
/* Example of name spaces setup */
grid-template-areas:
"header header header header"
"sidebar main main main"
"footer footer footer footer";
Check that you use the same number of columns on every row, because that is what went wrong when everything was squished in the lower righthand corner in figure 2. If you have short and long names for spaces, this is an easy mistake to make. See the next code snippet for an example; the mainheader row has a column less than the other rows.
/* One less column in the top row */
grid-template-areas:
"mainheader mainheader mainheader mainheader"
"menusidebar main main main main"
"footer footer footer footer footer";
Box it in
Unfortunately, like with all HTML and CSS, you can’t play Tetris with Grid; all shapes should be box-shaped. An attempt to create an L-shape failed as they are not allowed! In figure 3 I tried this within the “main” Grid, and it was squishiness all over again.
/* Attempting to create an L - shape around the content */
.main {
grid-area: main;
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(3,1fr);
grid-template-areas:
"content1 content2 content3 background"
"content1 content2 content4 background"
"content5 content2 content6 background"
"background background background background";
}
.content1{
grid-area: content1;
background-color: orange;
}
.content2{
grid-area: content2;
background-color: goldenrod;
}
.content3{
grid-area: content3;
background-color: orange;
}
.content4{
grid-area: content4;
background-color: darkseagreen;
}
.content5{
grid-area: content5;
background-color: darkseagreen;
}
.content6{
grid-area: content6;
background-color: orange;
}
.background{
grid-area: background;
}
If you want to accomplish something not-box-shaped, you can achieve this by chopping the area up into smaller shapes until you end up with boxes and apply similar styling. In the following example the background is split up into background1 and background 2. The result is shown in figure 4.
/* splitting up the background to create an L - shape */
.main {
grid-area: main;
display: grid;
grid-gap: 5px;
grid-template-rows: repeat(4, 1fr);
grid-template-columns: repeat(4,1fr);
grid-template-areas:
"content1 content2 content3 background1"
"content1 content2 content4 background1"
"content5 content2 content6 background1"
"background2 background2 background2 background1";
}
/* styling of background parts */
.background1{
grid-area: background1;
background-color: black;
}
.background2{
grid-area: background2;
background-color: black;
}
Another solution is to simply get rid of the “background*” divs in HTML and corresponding CSS but expand the number of rows and columns in the “main” div by one, via the grid-template-rows and grid-template-columns. That way you shrink the content, and the background of the underlying div shows next to and underneath the content (see figure 5).
/* expanding the grid to create an L - Shaped background */
.main {
grid-area: main;
display: grid;
grid-gap: 5px;
grid-template-rows: repeat(4,1fr);
grid-template-columns: repeat(4,1fr);
grid-template-areas:
"content1 content2 content3"
"content1 content2 content4"
"content5 content2 content6";
}
CSS Grid is a leap forward for front-end developers, it makes setting up a design a lot cleaner. But of course it is possible to make mistakes, as it is with using any technology. The examples here are probably not exhaustive, when I encounter more I will make a follow-up post.
To sum up, if you have problems with CSS Grid, check that:
- Your HTML has the right structure
- The same number of rows and columns are used within your named space
- The HTML elements are assigned to the right named areas in CSS
- The shapes that you are making are box-shaped
Thank you for reading!