How to move Items in CSS Grid Layout

Schedule items without overflow

Hello friends today we gonna learn about How to move Items in CSS Grid Layout. So read this article, How to move Items in CSS Grid Layout step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: How to move Items in CSS Grid Layout

The habits CSS grid layout module in web design is becoming more feasible as more browsers start up support itHowever, when creating layouts that fill grid cells, there may come a time when you want to accomplish more complicated things.

Maybe you want that, for example move slightly some grid items are stuck in their grid areas. You may want that too remove them from the grid container (overflow), or over each other (overlap), or just … to an empty space around it.

So in this post, I’ll show you how to do that move, arrange, overflow, overlap, and enlarge grid items when using the CSS Grid Layout Module.

back to menu ↑

Create a CSS grid

First, let’s create a simple CSS grid with one row and three columns

In the HTML we create some divs where the grid container contains the three grid items

In the CSS, the grid container has the display: grid; property and the grid items have grid area that identifies the names of the grid item areas.

We also add the grid-template-areas property to the grid container, which uses the grid area names assign the grid areas to the grid cells they represent

All columns take the size of a fraction (fr) of the container width, so that the grid items are enclosed.

.grid container {display: grid; grid-template-areas: ‘left center 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: light green;}

back to menu ↑

Overflow schedule items

You can create a grid item overflowing his grid container if it is necessary for a layout. To achieve the overflow effect, you just need use a different column size

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

The sum of column and spacing is greater than the width of the containercausing the grid items to overflow their container.

Grid items with overflow effect

back to menu ↑

Overlap grid items

A grid item can overlap (cover in whole or in part) another grid item in the following cases:

  1. It is set to go over (and over) the cell (s) of another grid item.
  2. The size has been increased to overlap with the nearby grid item.
  3. It has been moved to another grid item.

We will discuss the second and third cases later, in the “Sizing” and “Moving” sections.

First, let’s consider the first case when a grid item spans over another

CSS grid items overlap

Has the grid item in the middle spanned over the left, so only two items are visible on the screen.

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

The grid-column and grid-row properties Assign gridlines between which a column or row must fit.

The diagram below shows how the grid column: 1/3 CSS rule works: the middle column spans between grid lines 1 and 3As a result, the middle column overlaps the left column.

Gridlines

back to menu ↑

Move grid items

I mean moving move the items a littleIf you want to move an item completely to another cell / area, I recommend updating the grid creation code.

Moving grid items is easy. Only use the margin, transformation, or position: relative; propertiesSee below how the items are moved using those properties.

Grid item moved

The center and right grid items can be moved in the following ways (as shown above):

1. Use of margin

Negative margins increase the size of grid items, while positive margins trim them. By using a combination of both, you can move the grid items slightly.

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

2. Using Transform

The translate () CSS function moves an element along the x and y axesUsing it in conjunction with the transform property, you can change the position of a grid item.

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

3. Use position

Using the position: relative; line with the specified properties top, bottom, left, and right can also be used to move through grid items.

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

back to menu ↑

Order grid items

Grid items are displayed on the screen in the order they appear in the HTML source code

In the previous section, when the middle item was moved to the left, the browser placed it at the top of the left item. This happened because in the HTML

after

comes, so the middle item is displayed after (and over) the left.

Grid item moved

But we can change the order of grid items using the z-index or the order’s CSS properties.

Grid item order changed

Using the z-index: 1; line, the left grid item got a higher stack context

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

Just like in the CSS Grid Layout module, change the element order in HTML does not affect the grid layout, you can too

in front of

in the HTML. However, only do this if the updated HTML code does not affect accessibility.

back to menu ↑

Grid item size

If you use auto-sized rows or columns for a grid item (with the units auto, fr, gr), it will shrink to make room for the adjacent item that only grew larger if that item was not measured by transformation or negative margin

Remember, in our sample grid, all three columns take up one fraction (fr) of the grid container. Check out what all three items look like after the linker has been resized in two different ways.

1. Custom-made with width and height

Here we change the size of the left item with the properties width and heightThis will keep it inside the grid container.

Grid item with dimensions.grid-left {grid-area: left; width: 200px; height: 90px;}

2. Format with transformation

Here we change the size of the left item using the transform propertyAs a result, it flows over the container and the grid gap disappears.

Grid item with transformation.grid-left {grid-area: left; transform: scalex (1.8);}

back to menu ↑

How to move Items in CSS Grid Layout: benefits

  • The How to move Items in CSS Grid Layout tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the How to move Items in CSS Grid Layout guide is free.

back to menu ↑

Faq

Tutorial summary of How to move Items in CSS Grid Layout

In this guide, we told you about the How to move Items in CSS Grid Layout; please read all steps so that you understand How to move Items in CSS Grid Layout in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How to move Items in CSS Grid Layout, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to move Items in CSS Grid Layout tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide How to move Items in CSS Grid Layout. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the How to move Items in CSS Grid Layout, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How to move Items in CSS Grid Layout”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to move Items in CSS Grid Layout, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo
Shopping cart