Grid 1

On this page

The latest CSS layout addition and one which some commentators believe will be bigger than reponsive design.

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.
• grid-column-gap sets the gap.
• grid-row-gap sets the row gap.

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 grid-row-gap and grid-column-gap. You can even 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*="gridcontainer"] {
  font-family: 'segoe ui';
  gap: 5px;
  background: var(--headercolor);
}
.gridcontainer1,
.gridcontainer15 {
  display: inline-grid;
  margin:2em 0 2em 0;
  width: 30%;
}
.gridcontainer1 > .griditem,
.gridcontainer15 > .griditem {
  background: LightSkyBlue;
  padding: 0.4em;
}
.gridcontainer15 {
  grid-template-columns: repeat(3, 1fr);
  margin-left: 2em;
}
.gridcontainer2 {
  display: grid;
  gap: 3px
  margin: 2em 0;
  /* width:30%; */
}
.gridcontainer2 .griditem, .gridcontainer3 .griditem, .gc4 .griditem {
  padding:20px;
  background: #4AA2D9;
  color: white;
  /* border: solid 2px black; */
  /* font-size: 30px; */
  /* font-weight: bold; */
}
.gridcontainer3 {
  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;
}