For my latest article I wanted to create a matrix of photos and the grid layout option of CSS came into the rescue. With only two CSS classes, one for the grid itself and one for the grid cells you can create a beautiful image gallery for your website.

We are also going to see how to apply the grid on Markdown code and how to change the way the grid is presented on mobile devices.

Aligning text on the vertical center of a div element is a task we do every once in a while when we style our web applications. Moreover, we have to support more than one lines of text. With the introduction of the display: flex property this task has become a one-line case. However, there are still plenty of browsers, even newer ones, which still do not support this property. Here you can find the browser support for display: flex.

A very old HTML best practice suggests that we should not use tables to structure the HTML elements inside a webpage. This solution was used extensively a decade ago, and for this reason tables got a very bad reputation in the web community. However, using tables in your HTML code for structuring and presenting a set of data is still a valid option.

When you use a table with multiple columns, you often want to define the width for each of the columns of the table.

• One reason for that could be that you want to show more context of an “important” column than the others.

• Another reason could be the fact that if you do not define the column widths, the longest value in a column will also define the width of the column. As a result the other columns are getting shrank.

For your new web application, you might want to style the scrollbar so that it fits to the general design.

You can either use JavaScript code to achieve the styling or you could stick to CSS properties and pseudo-selectors.

In this article we pick the second variant and our main goal is to have a cross browser support for a styled scrollbar.

If you use the Google Webmasters for your webpage then you most probably have seen the Mobile Usability page under the Search Traffic menu. In this subpage Google lists for you CSS, HTML or SEO errors that have to do with the mobile version of your website. One of the most common errors that is listed there is the Content wider than screen error.

When working with less you most probably have to do some calculations and assign their result in a CSS property, for example into a width of a CSS class or a margin of an CSS id.

Apart from the calculated number you want to generate valid CSS code, so you also have to apply a measuring unit to this number, for example pixels or ems or percentages.

The CSS calc rule helps you to do mathematical calculations in your CSS files. For example you could calculate the height of a div element based on a set of less or sass variables. But what happens to the mathematical expressions inside the calc rule when your code gets minified for production? The less engine will calculate the expression inside calc(…) during the minification process and thus calc will contain a wrong value.

You often have to deal with words that are too long and they possible do not fit as a whole inside an HTML element. In such cases you have to break the word and put the part that does not fit in the next line. On the other side, you do not want to always fill the lines of an HTML element with text, which means that you do not want to break every single word, but instead you only want to break the words that are wider than the width of the containing HTML element.

When using the font rule together with the line-height rule, there is something that you have to pay attention to, if you want to be sure that the combination of the two rules works as intended.

To start with, the font property combines the font-family, the font-size, the font-weight and the line-height in one command. But what happens if you do not set the line-height inside the font property but use the line-height rule explicitly?

Suppose you have a HTML-list and you want to place its elements at the bottom of a parent element which is positioned absolute in your website and also has a predefined height. Apart from that you also want the list to be scrollable, when not all elements can be shown inside the parent element.

Consider the following HTML code which solves these two problems:

Less supports the creation of pseudo-functions that can be used as CSS-classes in your less files. Doing this way you can save multiple keystrokes, automate your stylings and avoid syntax errors.

Lets take a look at a function that automates the creation of CSS box-shadows and supports new browsers by making use of browser prefixes.