CSS GridLesson #185

Grid Align

Inside the grid container you can define the alignment of the grid content

CSS Grid Container - Align Grid Content

Inside the grid container you can define the alignment of the grid content with the following properties:

justify-content - Aligns the grid content when it does not use all available space on the main-axis (horizontally)

align-content - Aligns the grid content when it does not use all available space on the cross-axis (vertically)

place-content - Shorthand property for align-content and justify-content

The CSS justify-content Property

The justify-content property is used to align the grid content when it does not use all available space on the main-axis (horizontally).

This property can have one of the following values:

space-evenly

space-around

space-between

center

start

end

Note: The grid content's total width has to be less than the container's width for the justify-content property to have any effect.

Example

Example Code

css

Try it Yourself

.container {

    display: grid;

  justify-content: space-evenly;
}

Example

Example Code

css

Try it Yourself

.container {

    display: grid;

  justify-content: space-around;
}

Example

Example Code

css

Try it Yourself

.container {

    display: grid;

  justify-content: space-between;
}

Example

Example Code

css

Try it Yourself

.container {

    display: grid;

  justify-content: center;
}

Example

Example Code

css

Try it Yourself

.container {

    display: grid;

  justify-content: start;
}

Example

Example Code

css

Try it Yourself

.container {

    display: grid;

  justify-content: end;
}

The CSS align-content Property

The align-content property is used to align the grid content when it does not use all available space on the cross-axis (vertically).

This property can have one of the following values:

space-evenly

space-around

space-between

center

start

end

Note: The grid content's total height has to be less than the container's height for the align-content property to have any effect.

In the following examples we use a 300 pixels high container, to better demonstrate the align-content property.

Example

Example Code

css

Try it Yourself

.container {

    display: grid;
  height: 300px;

  align-content: center;
}

Example

Example Code

css

Try it Yourself

.container {

    display: grid;
  height: 300px;

  align-content: space-evenly;
}

Example

Example Code

css

Try it Yourself

.container {

    display: grid;
  height: 300px;

  align-content: space-around;
}

Example

Example Code

css

Try it Yourself

.container {

    display: grid;
  height: 300px;

  align-content: space-between;
}

Example

Example Code

css

Try it Yourself

.container {

    display: grid;
  height: 300px;

  align-content: start;
}

Example

Example Code

css

Try it Yourself

.container {

    display: grid;
  height: 300px;

  align-content: end;
}

The CSS place-content Property

The place-content property is a shorthand property for the align-content and the justify-content properties.

If place-content has two values:

place-content: start center; - the align-content value is 'start' and justify-content value is 'center'

If place-content has one value:

place-content: end; - both align-content and justify-content values are 'end'

Note: The grid item's total height and width has to be less than the container's height and width for the place-content property to have any effect.

Example

Example Code

css

Try it Yourself

.container {

    display: grid;
  height: 300px;

  place-content: center;
}

Example

Example Code

css

Try it Yourself

.container {

    display: grid;
  height: 300px;

  place-content: end space-between;
}