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.
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 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;}
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.
Overlap grid items
A grid item can overlap (cover in whole or in part) another grid item in the following cases: 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
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.
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.
The center and right grid items can be moved in the following ways (as shown above): 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;} 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);} 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;}
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 But we can change the order of grid items using the z-index or the order’s CSS properties.
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 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. Here we change the size of the left item with the properties width and heightThis will keep it inside the grid container. .grid-left {grid-area: left; width: 200px; height: 90px;} 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-left {grid-area: left; transform: scalex (1.8);}
How to move Items in CSS Grid Layout: benefits
Faq
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 has Proudly Shared Free Information Since 2014.
