In this article, I will be covering the basics of CSS Grid, defining what it is and how to get started with it. This is to aid my own learning and hopefully give something quick and useful back to the community.
Follow along as I break down this awesome bit of technology! ????
CSS Grid gives you the ability to divide a given section into a bunch of rows and columns, hence the name CSS Grid. This is useful when building layouts, because you can position elements in any area of the grid, by specifying where you want the item to go in your CSS.
To get started, you need a parent container which you'd apply a special property to, to activate the Grid. Any items that you want to be a part of this Grid are then placed within this parent container.
<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>
.container {
display: grid;
}
To activate the Grid, we apply the display property with the grid value. This tells the browser that we want the specified container to be a Grid, that's it.
This then allows us to use a bunch of different properties associated to CSS Grid to start building our layout.
Example Usage
.container {
...
/* Defining two columns with the size of 60px */
grid-template-columns: 60px 60px;
}
When using these properties, you are explicitly defining the Grid, meaning that you are defining exactly how the Grid should behave.
If we defined our columns without specifying any rules for the rows, CSS will implicitly create the rows for us, depending on the size of the elements.
.container {
...
/* Create 10 pixels of space on the top and bottom of each Grid element,
and 20 pixels of space on the left and right sides. */
grid-gap: 10px 20px;
}
.container {
...
grid-auto-columns: 1fr;
}
Using the example above, what happens when we define this property is that any other columns that are added to the Grid, implicitly, will use up 'one free space' available on the page automatically. Note: fr does not stand for free space, but it's a neat way to think of how this unit works.
grid-column is shorthand for the following properties:
grid-row is shorthand for the following properties:
The -start properties tells the Grid where to initially place an item, and the -end properties tells the Grid at which point the element to be placed should stop at.
The value you specify refers to the Grid Line. Thinking of a square box, the line on the left would be Line 1, and the line on the right would be Line 2.
.container {
...
/* Start at column line 2, end at column line 4*/
grid-column-start: 2;
grid-column-end: 4;
/* Shorthand */
grid-column: 2 / 4;
}
Grid Template Areas are a way to name the different sections of the Grid. The property used is called grid-template-areas. Below is the basic syntax for its usage:
.container
{
grid-template-areas:
"sidebar-1 content sidebar-2"
}
The syntax roughly follows the structure of the actual Grid. So, the first three columns that are present will be called sidebar-1, content, and sidebar-2 respectively.
To continue defining the other areas of the Grid, such as rows below it, you continue on a new line with either the same name to define a whole area, or a new name to identify a new section of the grid.
.container
{
grid-template-areas:
"sidebar-1 content sidebar-2"
"sidebar-1 content sidebar-2"
"footer footer footer";
}
Using your pre-defined class names for each of the elements on the page, you can use the Grid Template Area names to define where to place such elements. An example is shown below:
.footer
{
grid-area: footer;
}
.item1
{
grid-area: sidebar-1;
}
.item2
{
grid-area: content;
}
.item3
{
grid-area: sidebar-2;
}
This is saying that, for each item selected, place it in the defined area of the grid that we have specified. The element being placed will naturally position itself into the named section of the grid, using grid-area.
This was a very quick introduction to CSS Grid, as I wanted to summarise the basic concepts I learned through the following resources:
Wes Bos: CSS Grid Course
Mozilla Developer Network: CSS Grid Layout
Thank you for reading ????! If you're interested in following me on my Web Development journey, follow me on Instagram and Twitter ????
Special thanks to our guest blogger yusufcodes a UK based BSc Comp Sci student for his contribution to the Ronald James Blog this week.
Visit the original link for this blog here.
We are a leading niche digital & tech recruitment specialist for the North East of England. We Specialise in the acquisition of high-performing technology talent across a variety of IT sectors including Digital & Technology Software Development.
Our ultimate goal is to make a positive impact on every client and candidate we serve - from the initial call and introduction, right up to the final delivery, we want our clients and candidates to feel they have had a beneficial and productive experience.
If you’re looking to start your journey in sourcing talent or find your dream job, you’ll need a passionate, motivated team of experts to guide you. Check out our Jobs page for open vacancies. If interested, contact us or call 0191 620 0123 for a quick chat with our team.
Follow us on our blog, Facebook, LinkedIn, Twitter or Instagram to follow industry news, events, success stories and new blogs releases.
Back to Blog