Base aligning across Grid columns

Hello! first post, fairly regular reader.

My problem: I’m trying to base align content inside 1 grid row. 6 columns total, first one is an image, other 5 are text only. I’ve tried “align-items: baseline” and “vertical-align: baseline” and neither have had any effect.

Any advise?

thank you!

Hi, and welcome to the forums. :slight_smile: Could you post a demo of the code you’re using? Either the ful code here, or perhaps a link to CodePen etc.

Are you using the new grid spec for this, or just using “grid” loosely?

Thanks! yes, I’m using the new CSS commands. here’s my CSS code:

#navigation {
	display: grid;
	grid-template-rows: 1;
	grid-template-columns: [first]20% [second]fr [third]15% [fourth]15% [fifth]15% [sixth]15%;
	font-family:  "Arial Black", "sans-serif";
	vertical-align:bottom;  
			} 

#navigation a {
	font-family:  "Arial Black", "sans-serif";
	vertical-align:bottom;
	color:black;
	text-decoration:none;
	}
			
#navigation a:visited {
	font-family:  "Arial Black", "sans-serif";
	vertical-align:bottom; 
	color:black;
	text-decoration:none; 
	}		
			
#navigation #nav-col-1 {
	grid-row:2;
	grid-column: [first];
			}
			
#navigation #nav-col-2 {
	grid-row:2;
	grid-column: [second];
			}
			
#navigation #nav-col-3 {
	grid-row:2;
	grid-column: [third];
			}
			
#navigation #nav-col-4 {
	grid-row:2;
	grid-column: [fourth];
			}
			
#navigation #nav-col-5 {
	grid-row:2;
	grid-column: [fifth];
			}
			
#navigation #nav-col-6 {
	grid-row:2;
	grid-column: [sixth];
			}

and here’s a screen shot of the result I’m getting

I appreciate the help!

Could you post the html too?
Though I’m not promising anything, grid is new and I’ve yet to get to grips with it myself. I did have a play a few months ago, but have forgotten that by now.
But someone else may know.
In the meantime, does this help?

For a single line like your image, perhaps flex would do it, it has much better browser support (and more familiar to me).
You will only really want grid if there are going to be columns following the items below.

thank you! Yes, that’s a good article. Here’s the pertinent HTML:

<div id="navigation"> 
	<div id="nav-col-1">
	<p><img src="Local/graphics-for-design/BAM_logo.jpg" width="293.75" height="95" alt=""/></p>
	</div> <!-- end nav-col-1 -->
	
	<div id="nav-col-2">
		<p> </p>
	</div><!-- end nav-col-2 -->
	
	<div id="nav-col-3">
	<p><a href="#Bio">BIO</a></p>
	</div><!-- end nav-col-3 -->
	
	<div id="nav-col-4">
	<p><a href="#Work">WORK</a></p>
	</div><!-- end nav-col-4 -->
	
	<div id="nav-col-5">
	<p><a href="#HireMe">HIRE ME</a></p>
	</div><!-- end nav-col-5 -->
	
	<div id="nav-col-6">
	<p><a href="#Connect">CONNECT</a></p>
	</div><!-- end nav-col-6 -->

</div>

I’d never explored flex and I was reading a lot of articles about grid when this project popped and, since this element was columnar in nature, I thought I’d try grid. Grid seems to be working OK in other parts of the site. I’m using grid on an element by element approach rather than putting the whole site into grid, for simplicity.

You probably want flex-end to line them up with the bottom of the image.


#navigation {align-items:flex-end;}

Not sure your grid-column and row syntax is correct but I’m a beginner at grid also.

that worked! thank you very much! much appreciated!

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