Grid 1

On this page

CSS grid layout is essential to learn and can get quite complex. In this first part we look at the basics and the difference between display: grid and display: inline-grid

Just like flex boxes you start by setting the parent element:

display:grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 3px;

display:grid vs display:inline-grid

A grid set to display:grid looks like this:

When set to display: inline-grid it looks like this. (BTW no width was defined for either the container or the grid items inside it.)

GC 4

Now we’re getting somewhere. This layout uses several more properties in the grid container:

• display:grid as usual sets the container.
• grid-template-columns specifies both the number and width of the the columns.
• column-gap sets the gap between columns.
• row-gap sets the gap between rows.
• gap sets the gap between rows and columns. It can either take one value for both rows and columns or two values, the first being the gap between rows and the second being the gap between columns.

display: grid;
grid-template-columns: 20% 60%;

NOTE that all the business is in the container. There is nothing but regular styling in grid item divs.

SHORTCUT gap is shorthand for both row-gap and column-gap. Or you can use two values: gap: 1em 4em in which case the first value is the row gap and the second is the column gap. NB. You can use gap in flexbox too now.

So gap: 30px sets the gap for both rows and columns to 30px.

This means you can get started with grids with just 3 lines of new code:

• display: grid
• grid-template-columns: 30% 65%
• gap: 25px; Even this is not strictly necessary if you can live without a gap.

However this is just the beginning. There are 18 properties for the grid container and another 10 for the grid items.

More in Part 2

.content > div[class*="grid-container"] {
  font-family: 'segoe ui';
  gap: 5px;
  background: var(--headercolor);
}
.grid-container1,
.grid-container15 {
  display: inline-grid;
  gap: 3px;
  margin:2em 0 2em 0;
  width: 30%;
}
.grid-container1 > .grid-item,
.grid-container15 > .grid-item {
  background: #4AA2D9;
  color: #fff;
  padding: 0.4em;
}
.grid-container15 {
  grid-template-columns: repeat(3, 1fr);
  margin-left: 2em;
}
.grid-container2 {
  display: grid;
  gap: 3px
  margin: 2em 0;
  /* width:30%; */
}
.grid-container2 .grid-item, .grid-container3 .grid-item, .gc4 .grid-item {
  padding:20px;
  background: #4AA2D9;
  color: white;
  /* border: solid 2px black; */
  /* font-size: 30px; */
  /* font-weight: bold; */
}
.grid-container3 {
  display: inline-grid;
  margin:2em 0 2em 0;
}
.gc4 {
  display: grid;
  grid-template-columns: 20% 60%;
  grid-column-gap: 20px;
  grid-row-gap: 30px;
  background: DarkKhaki;
}