Moving Items in CSS Grid Layout [Guide]

Using a CSS Grid Layout Module in web pattern becomes some-more and some-more possibly as some-more browsers start to support it. While formulating layouts stuffing in grid cells, there competence come a moment, though, when we wish to grasp some-more difficult things.

Introduction to a CSS Grid Layout Module

Introduction to a CSS Grid Layout Module

It was once tables, afterwards margins and floats, afterwards flexbox and now grid: CSS always directed towards new…Read more

For instance, we competence wish to slightly pierce around some of a grid equipment stranded in their grid areas. You also competence wish to move them out of a grid container (overflow), or over any other (overlap), or just… to some dull space around.

So, in this post, I’ll uncover we how we can move, order, overflow, overlap, and distance grid items when we use a CSS Grid Layout Module.

Create a CSS grid

First, let’s emanate a elementary CSS grid with one quarrel and 3 columns.

Grid equipment but overflowGrid equipment but overflow

In a HTML, we emanate a garland of divs where a grid enclosure contains a 3 grid items.

div class='grid-container'
  div class='grid-left'/div
  div class='grid-center'/div
  div class='grid-right'/div
/div

In a CSS, a grid enclosure has a display: grid; property and a grid equipment have grid-area that identifies a names of a grid object areas.

We also add a grid-template-areas property to a grid container, in that a grid area names are used to assign a grid areas to a grid cells they represent.

All columns take a distance of one fraction (fr) of a enclosure width, ensuring a containment of a grid items.

.grid-container {
  display: grid;
  grid-template-areas: 'left core right';
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 80px;
  grid-gap: 5px;
  width: 360px;
  background-color: magenta;
}
.grid-left {
  grid-area: left;
}
.grid-center {
  grid-area: center;
}
.grid-right {
  grid-area: right;
}
.grid-container div {
  background-color: lightgreen;
}

Overflow grid items

You can make a grid object overflow a grid container if it’s required for a layout. To grasp a crawl effect, we usually need to use a opposite mainstay size:

.grid-container {
  display: grid;
  grid-template-areas: 'left core right';
  grid-template-columns: repeat(3, 150px);
  grid-gap: 5px;
}

The sum of a column- and gap-size is bigger than a width of a container, that causes a grid equipment crawl their container.

Grid equipment with crawl effectGrid equipment with crawl effect

Overlap grid items

A grid object can overlap (fully or partially cover) another grid item in a following cases:

  1. It’s set to camber opposite (and over) a cell(s) of another grid item.
  2. Its distance has been increased, causing it to overlie with a circuitously grid item.
  3. It’s changed over on tip of another grid item.

We’ll plead a second and third cases later, in a “Sizing” and “Moving” sections.

First, let’s see a initial box when a grid object spans opposite another one.

CSS grid equipment overlappedCSS grid equipment overlapped

The grid object during a core has spanned over a left one, so usually dual equipment are manifest on a screen.

.grid-center {
  grid-area: center;
  grid-column: 1 / 3;
}

The grid-column and grid-row properties assign grid lines between that a mainstay or quarrel needs to fit.

On a next diagram, we can see how a grid-column: 1 / 3 CSS sequence works: a core mainstay spans between a grid lines 1 and 3. As a result, a core mainstay overlaps a left one.

Grid linesGrid lines

Move grid items

By moving, we meant moving a equipment somewhat around. If we totally wish to immigrate an object into another grid cell/area we suggest we refurbish a grid origination code.

Moving around grid equipment is simple. Just use a margin, a transform, or a position:relative; properties. See next how a equipment are changed regulating those properties.

Grid object movedGrid object moved

The core and right grid equipment can be changed (as shown above) in a following ways:

1. Using margin

Negative margins boost a measure of grid items, while certain margins trim them. By regulating a multiple of both, we can slighlty pierce a grid equipment around.

.grid-center {
  grid-area: center;
  margin-left: -10px;
  margin-right: 10px;
  margin-top: -10px;
  margin-bottom: 10px;
}
.grid-right {
  grid-area: right;
  margin-left: 10px;
  margin-right: -10px;
  margin-top: -10px;
  margin-bottom: 10px;
}
2. Using transform

The translate() CSS duty moves an component along a x- and y-axes. Using it together with a transform skill allows we to change a position of a grid item.

.grid-center {
  grid-area: center;
  transform: translate(-10px, -10px);
}
.grid-right {
  grid-area: right;
  transform: translate(10px, -10px);
}
3. Using position

Using a position: relative; sequence with a specified top, bottom, left, and right properties can be used for relocating around grid equipment as well.

.grid-center {
  grid-area:  center;
  position: relative;
  bottom: 10px;
  right: 10px;
}
.grid-right {
  grid-area: right;
  position: relative;
  bottom: 10px;
  left: 10px;
}

Order grid items

Grid equipment are rendered on a shade in a sequence they seem in a HTML source code.

In a prior section, when a core object was changed left, it was placed on tip of a left object by a browser. This happened since in a HTML, div class='grid-center' comes after div class='grid-left', hence a core object is rendered after (and over) a left one.

Grid object movedGrid object moved

However, we can change a sequence grid items regulating a z-index or a order CSS properties.

Grid object sequence changedGrid object sequence changed

Using a z-index: 1; rule, a left grid object got a aloft stacking context.

.
grid-left{
  grid-area: left;
  z-index: 1;
}

As in a CSS Grid Layout module, changing a component sequence in HTML doesn’t impact a grid layout, we can also put div class='grid-center' before div class='grid-left' in a HTML. Only do this, though, if a updated HTML formula doesn’t mistreat accessibility.

Size grid items

If we use auto-sized rows or columns for a grid object (using auto, fr, gr units), it will cringe to make space for a beside object that has grown in distance only if pronounced object was not sized by transform or a disastrous margin.

Remember, in a representation grid, all 3 columns take one fragment (fr) of a grid container. Take a demeanour during how all 3 equipment demeanour like after a left one is resized in dual opposite ways.

1. Sized with width and height

Here, we change a distance of a left object using a width and height properties. As a result, it stays inside a grid container.

Grid object sized with dimensionsGrid object sized with dimensions
.grid-left {
  grid-area: left;
  width: 200px;
  height: 90px;
}
2. Sized with transform

Here, we change a distance of a left object using a transform property. As a result, it overflows a enclosure and a grid opening also disappears.

Grid object sized with transformGrid object sized with transform
.grid-left {
  grid-area: left;
  transform: scalex(1.8);
}

Integrating Simple CSS Grid Layouts into WordPress

Integrating Simple CSS Grid Layouts into WordPress

Getting a consistent, plain grid blueprint into WordPress can be a painless routine if we use a right…Read more

Add Comment