Tag Archives: CSS Grid

Bootstrap 101: Grid Layout

A few weeks ago, we looked at how to how to use CSS Grid and two weeks ago we looked at how to do a grid layout with Bulma.  This week, we revisit Bootstrap for the first time in over five years and look at how to do a grid-based layout with it.

See the Pen
Bootstrap 101: Layout
by Joe Steinbring (@steinbring)
on CodePen.

For the example, I tried to imitate what we did with the Bulma example.  You’ll notice that there is still no CSS or JavaScript but the syntax is a bit different.

Bootstrap wants a container, that can be .container, .container-sm, .container-md, .container-lg, .container-xl, or .container-fluid.  You then want to define rows with .row.  The rows are always 12 column widths across, so if you use .col-{number}, then {number} should always be the number of columns divided by the number 12.  You can also use .col-sm-{number}, .col-md-{number}, .col-lg-{number}, .col-xl-{number}, or .col-{number} to write to specific screen sizes.

If you leave .container-fluid and leave out the number from the column class, it should evenly space your columns.

Have any questions, comments, etc?  Leave a comment, below.

Bulma 101: Grid Layout

Three years ago, I posted something on Bulma while trying to figure out how navigation works with it.  After my post on CSS Grid, I figured that I would show how to do a grid-based layout with Bulma.

See the Pen
Bulma 101: Layout
by Joe Steinbring (@steinbring)
on CodePen.

By default, the column spacing is set to auto.  You can use classes like is-full, is-three-quarters, is-two-thirds, is-three-fifths, or is-half to tweak the column widths, though.

So, are you better off using CSS Grid or CSS Grid via Bulma?  There are pluses and minuses with both.  You will notice that the pen has no CSS or JavaScript in it.  You will also notice that there is more HTML in it.  I think that there is more room for problems with the straight CSS Grid route.  If the spacing is defined by a global library and used throughout the project, you know that everything will be uniform.

Have any questions, comments, etc?  Leave them in the comments, below.

CSS Grid 101

In this week’s post, I wanted to explore CSS Grid.  The pen that I created below is meant to be a personal start page but it is also a good example of how CSS Grid works.

See the Pen
CSS Grid 101
by Joe Steinbring (@steinbring)
on CodePen.

You will notice …

.grid-container {
display: grid;
grid-column-gap: 20px;
grid-template-columns: auto auto auto auto;
grid-row-gap: 10px;
}

… surrounds all of the content on the page.  The display:grid; bit makes the element a grid container.  The grid-column-gap and grid-row-gap are pretty self explainable.  If you wanted to, you could also use grid-gap and define both the column gap and the row gap in the same line.  The grid-template-columns bit is pretty powerful because you can use auto and evenly space the columns across the screen but you can also define them like grid-template-columns: 50px auto 50px auto; or grid-template-columns: 100px 50px 100px 50px; and it will adapt.

w3cschools has a pretty good illustration of how the grid-column-start and grid-column-end definitions work.

If you have a 3 by 3 grid and you say …

grid-column-start: 1;
grid-column-end: 3;

… the cell will start at line one and end at line three (meaning that it will fill the first and second cells in the grid).  If you want to fill all three cells in the line, you need to do …

grid-column-start: 1;
grid-column-end: 4;

If you have any questions, let me know below.  I am going to try to do a flexbox post soon, so we can start comparing and contrasting the approaches.