Grid - How can I move content out of specific areas?

HTML & CSS
1

I have this codepen, where the first “3” areas (Random Text 1/2/3) should all be empty. They should move further down the line, if that makes sense :slight_smile: . I need to somehow designate the first 3 areas as “do not use”. I’ve looked through this documentation and I’m trying to avoid giving a specific template area name to each individual box (10 total boxes if you do 2 rows x 5 columns) and manually specifying content.

The ultimate goal was to create 2 lines of links, 2 in the first row (aligned to the right) and the next row to have the rest of the links (in this case, 5). Figured this was a good time to practice grid :slight_smile: .

2 Likes
2

Grid is still a mystery to me but couldn’t you just set the starting position of the first li item and the rest follows

e.g.in your > li block:

&:first-child{
        grid-column:4;
      }

Not sure if that’s the correct way to do it :slight_smile:

1 Like
3

That’s a great find. Thanks! I am not sure either. My main query is whether it can be managed from the parent level :thinking: .

4


Any clue how I’d fix the right alignment? I can see how the grid boxes are laying out…I tried a value of “min-content” but that causes text wrapping on my live example (and white-space: nowrap brings me back to the original problem .

5

I’m only on a mobile at the moment so not sure what it is that’s happening or what you wanted to happen?

If you can explain I’ll take a look tomorrow when I’m back on the computer but usually you work it out before I do :slight_smile:

6

I’m leaving this for now due to real life restrictions, but I might take another look at this tomorrow.

If you go into chrome inspector and highlight the parent in the HTML, you can see how the inspector adds the highlighted boxes around the children. If you look at the 2 columns, the far right item (along the righthand side)…the width of both rows are equal to the item with the longest text, which makes sense. This is a grid. That means the item with the shorter text is in that same grid but …

Ok, I just modified the codepen and added a background to the anchor. Hopefully that will show my issue. The last row needs to shift over to the right and be aligned with the edge of the parent.

7

Maybe it’s brute force, but can’t you just set the li to text-align:right?

1 Like
8

However, the spacing between each items is dictated in grid to be 30px. Sorry :frowning: .

Edit- I lied, I have to keep working on this. Too frustrating!

9

I’m not sure I’m following but css grid will create rows and columns like tables.

That means that columns will align and match the cells vertically.

10

That’s what I’m seeing too. I’m just wondering if it has some combination where I can get this working. I’m guessing it’s not. The closest I have is on codepen right now, but I feel like I’m going to be stuck doing this in flex (and having to modify my given HTML to get it working). :frowning: .

11

If you want uneven columns then you can’t really do that with grid because it’s … a grid :slight_smile:

Flex would be the way to go here assuming I understood correctly :wink:

3 Likes
12

That’s why this is a grid learning experience. Whoops :slight_smile: . I just knew flex couldn’t give me what I wanted without HTML modification. And with my CMS at work, the first thing you try to do is avoid HTML modification via Javascript. But here we are :slight_smile: . Thanks Paul.

2 Likes
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.