CSS grid

Learn grids to draw your own layout

All scoreboards have a default layout based on a grid, learn how to manage blocks position to create your own.

Useful references:

With CSS 3 “display: grid;” is become a magic word. Now we can easily create infinite kinds of layout with few lines of code. Flexyscore scoreboards are based on this functionality for generate the default layout but you can learn how to override this part of CSS for create a completely different one.

is a Powerful, Flexible and Customizable Score bug for Sport Live Stream and video production. Try Flexyscore for free!

Soccer Basketball Hockey Tennis Volleyball Football Baseball Handball Rugby Boxing Table Tennis

The importance of units of measurement:

It is imperative that your scoreboard has a fluid design. Each element must fit the frame that contains it so that when you insert the structure into the broadcasting software you can easily control its size.

To get a fluid design you will therefore need to use relative units of measurement (for example: vw or vh for dimensions, em for text, % for ratios or fr for for subdivision of the grid, etc..). Never use absolute units of measurement (for example pixels).

Grid Structure:

The CSS grid is “similar” to an HTML table but much more flexible.
It is therefore possible to transform, define and position every single element inside a container.

let’s start with a simple Html structure:

<!-- HTML -->
<div class="container">
   <span class="content content1">first el</span>
   <span class="content content2">second el</span>
   <span class="content content3">third el</span>
   <span class="content content4">fourth el</span>
   <span class="content content5">fifth el</span>
   <span class="content content6">sixth el</span>

/*-- CSS --*/
.container {display: grid; grid-template: auto / 1fr 1fr 1fr;}

This define a grid with two row and three columns. The height of the grid and rows is automatic (“auto” take the height of the content) while the width of the columns is a fraction of entire width, in this case 1/3 (1fr X 3 = 3/3 i.e. the entire width). In this case 1fr is equal to 33.333333333333%.

In this way you can define even a complex grid using different measurements for the height and width of rows and columns.

Positioning the elements

In the grid structure each element is automatically inserted according to the Html order. Through CSS, however, we can decide where to place each single element in the grid.

This schema show how the grid is subdivided, the numbers are used to identify the areas of the grid.

/*-- CSS --*/
.content6 {grid-row:2/3; grid-column: 3/4;}

In this case we have placed the sixth el element in the second row (grid-row: 2/3;) and third column (grid-column: 3/4;).

With this method it is therefore possible to change the position of each single element of the scoreboard and design a new layout.

Leave a Reply

Your email address will not be published. Required fields are marked *