Flexbox item within css grid cell appears to wrap

Question

I'm new to using css grid, and I am trying to position two items within a single grid cell using flexbox to position the items. There is a logo on the left and a nav bar on the right, but the nav bar is not centered within cell "a", it appears to go below the lower boundary of cell "a" (I tried to upload a jpeg image, but Stack Overflow is having problems right now accepting image uploads, see Image upload fails with "imgur is rejecting the request").

Here is the html code:

<div class="a">

<div class="a_left">
Logo for Project
</div>

<div class="a_right">
<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>
</div>

</div>

Here is the css code:

.a{
    display: grid;
    font-family: sans-serif;
    color: green;
    font-size: 16pt;
}

.a_left{
    display: flex;
    text-align: left;
    vertical-align: left;
    flex-wrap: nowrap;
}

.a_right{
    display: flex;
    height: 100%;
    flex-wrap: nowrap;
    justify-content: right;
    vertical-align: right;
}

.topnav {
    align-content: right;
    justify-content: center;
    overflow: hidden;
    background-color: #333;
    height: 100%
}

The grid container is "a", and the nav bar is in the a_right flexbox. I have tried a lot of the likely height, width and centering properties without success, but I don't know if the property should be applied to a or to a_right.

Thanks for any help centering this nav bar.

score 2 · Answer 1 · answered Aug 07 '18 at 17:58

2

If you want to have the logo on the left and menu on the right, you can simply do:

.a {
  display: flex;
  justify-content: space-between;
}

<div class="a">
  <div class="a_left">
    Logo for Project
  </div>
  <div class="a_right">
    <div class="topnav">
      <a class="active" href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
    </div>
  </div>
</div>

answered Aug 07 '18 at 17:58

Stickers

75,527
23
147
186

Thank you for this additional way of doing it. – RTC222 Aug 08 '18 at 14:56

score 1 · Accepted Answer · answered Aug 07 '18 at 17:39

1

Flexbox is a container for centering its children - right now it looks like you're making the children into flexboxes, which won't do you a whole lot.

If you need to maintain the "grid" display property, add a container for both your logo and nav bar. This is the container that you will want with display:flex, and it will be the container that you apply your flex-related alignment properties to.

Also, to vertically align content in a flexbox, use align-items. Horizontal alignment requires justify-content.

answered Aug 07 '18 at 17:39

Joel Rummel

802
5
18

Okay, I changed the line
to
, so now I have only one flexbox. However, the items are stacked one right below the other. With just a single flexbox, I need to specify that the nav bar is aligned to the right. Which property will do that, and would that property go within the section below
? Thanks very much for your help.
– RTC222 Aug 07 '18 at 17:49
@RTC222 I think you misunderstood what I meant. [Here is what I meant](https://jsfiddle.net/v9ga3dyo/8/) about putting it all in another container. I added `justify-content:space-between` to align the nav bar to the right while keeping the logo to the left. – Joel Rummel Aug 07 '18 at 17:56
Fantastic, and thanks very much. I am studying your code and making the changes. I'll let you know what happens. – RTC222 Aug 07 '18 at 18:04
@RTC222 cool - lemme know if something else comes up... and please remember to mark the answer as accepted if you've got this one figured out. – Joel Rummel Aug 07 '18 at 18:06
1

Yes, it did work with your changes. I checked your answer and upvoted it. Thanks a million. – RTC222 Aug 07 '18 at 18:12

score 1 · Answer 3 · answered Aug 08 '18 at 00:54

So you set your element .a to be a grid container:

.a {
    display: grid;
}

… and you want to know why the children (.a_left and .a-right) are stacking vertically instead of on the same row.

The reason is that you haven't defined explicit tracks with grid-template-columns or grid-template-areas. Because you haven't defined explicit columns, grid-auto-columns comes into play to create implicit columns.

The default value of grid-auto-columns is auto, which essentially allows each grid item to occupy an entire row. That's what you're seeing; it's like block elements stacking.

Try this instead:

.a {
  display: grid;
  grid-template-columns: auto 1fr; /* define explicit columns */
  color: green;
  font-size: 16pt;
}

.a_left {
  display: flex;
}

.a_right {
  display: flex;
  justify-content: center;
}

.topnav {
  background-color: yellow;
}

<div class="a">
  <div class="a_left">Logo for Project</div>
  <div class="a_right">
    <div class="topnav">
      <a class="active" href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
    </div>
  </div>

You may also want to read this post about centering elements on a row having other elements: Center and right align flexbox elements

Thanks very much for this answer. – RTC222 Aug 08 '18 at 14:57 — RTC222, Aug 08 '18 at 14:57

Flexbox item within css grid cell appears to wrap

3 Answers3