Grid-Template-Columns Help |
Grid-Template-Columns Help |
oddcarout |
May 15 2023, 11:45 AM
Post
#1
|
Member Group: Members Posts: 62 Joined: 21-November 06 Member No.: 1,017 |
I am trying to relearn, using only html5, CSS and JS.
I am trying to follow a tutoral and am having problems with grid. All the grid-gap ends up at the end of the nav instead of between each anchor. HTML: <header> <div class="container"> <h2><span>BONTEXX</span>WORKS</h2> <nav> <div class="menu-flex"> <a href="#">Home</a> <a href="#">Products</a> <a href="#">Projects</a> <a href="#">shop</a> <a href="#">Contact</a> </div> </nav> </div> </header> CSS: header { position: fixed; top: 0; left: 0; width: 100%; } header .container { padding-top: 32px; padding-bottom: 32px; display: flex; justify-content: space-between; margin: 0 auto; max-width: 1600px; padding-left: 128px; padding-right: 128px; } header .container h2 { text-transform: uppercase; font-size: 32px; font-weight: 900; } header .container h2 span { font-weight: 600; } header .container nav { display: grid; grid-gap: 16px; grid-template-columns: repeat(5, auto); If you could please let me know what I am missing or where I have gone wrong, I would apricate it. Thank you |
coothead |
May 15 2023, 04:06 PM
Post
#2
|
Advanced Member Group: Members Posts: 201 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there oddcarout,
coothead |
jpolfg999 |
Jun 9 2023, 05:07 AM
Post
#3
|
Group: Banned Posts: 2 Joined: 9-June 23 Member No.: 28,950 |
Based on the code provided, it seems that the grid gap is not being applied correctly because the anchor elements (<a>) are being displayed as inline elements by default. To make the grid gap work as expected, you need to change the display property of the anchor elements.
Here's an updated CSS code snippet that should resolve the issue: header .container nav { display: grid; grid-gap: 16px; grid-template-columns: repeat(5, auto); } header .container nav a { display: block; /* Change display to block */ } By setting the display property of the anchor elements to "block," each anchor will be treated as a block-level element, allowing the grid gap to be applied between them. Make sure to add the modified CSS code to your existing stylesheet, and the grid gap should appear between each anchor element within the navigation menu. If you continue to experience issues or need further assistance, please let me know. |
Jason Knight |
Jun 13 2023, 12:27 AM
Post
#4
|
Advanced Member Group: Members Posts: 100 Joined: 25-December 22 Member No.: 28,719 |
Why are you dumping the menu in there as flat anchors? What's with the DIV for nothing? Why are you telling users with accessibility needs to go **** themselves by using pixel measurements? This looks like the page/site header, so why are you starting the document with an H2 instead of the appropriate H1? Why are you trying to use position:fixed?
And really since you've got a one dimensional container, flex would be more appropriate and simpler than grid. Despite some folks wild protestations to the contrary. So... yeah, you're learning. Let's teach you some stuff. CODE <header> <h1><span>BONTEXX</span>WORKS</h1> <nav id="mainMenu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Projects</a></li> <li><a href="#">shop</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> You don't need all those blasted DIV. There's nothing you're trying to do to warrant their presence. As this is the page header, H1 is the correct tag as it's THE heading (singular) that EVERYTHING on the page is a subsection of. That's what H1 MEANS. Just as an H2 marks the start of a major subsection of the Page (h1), H3 marks the start of a subsection of the H2 preceding it, and so forth. They do NOT mean fonts in different weights and sizes. This is also why the people who use H1 for their banner / CTA instead of the site title know exactly two things about web development; and Jack left town. Even if you use the NAV tag that does not recuse you from using a list for proper semantics. Anchors are semantically neutral applying no meaning to their content - only behavior. As such you had written your markup as a run-on sentence "Home Products Projects Shop Contact" which can get a bit confusing on braille readers and/or search. It's a list of choices, put it in a LIST. YES even with NAV in the picture! Remember, HTML is about meaning, not appearance. That way your pages are useful to everyone, not just the perfectly sighted on the perfect 21" 1080p screen. I used the ID #mainMenu since the main menu should be unique, we should NOT be using ID's or classes to say what things look like (which is why bootcrap and failwind are mentally enfeebled trash). Using an ID opens the door to adding :target driven mobile "hamburger" menu" later without the need for getting JavaScript involved. For CSS I'd start with a reset. This is a simple one: CODE html,body,div,p,h1,h2,h3,h4,h5,h6, ul,ol,li,dl,dt,dd,form,fieldset,caption,legend, table,tr,td,th,address,blockquote,img { margin:0; padding:0; } img, fieldset { border:none; } body *, *:after, *:before { box-sizing:border-box; } Makes styling easier and consistent cross-browser. The box-sizing in particular since border-box puts padding and border INSIDE your width instead of around it. For the header: CODE body > header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; position:sticky; top:0; width:100%; max-width:100rem; margin:0 auto; padding:2rem clamp(1rem, 4vw, 8rem); } We only need one direction on the outer container, so flex is simple. As there's just the H1 and NAV space-between puts them on opposite sides of the screen. The align-items:center; makes sure they line up vertically. I use position:sticky instead of position:fixed so that you don't have to declare as much to keep the header on screen when you scroll. Sticky is fun! I've got a demo here showing how fun: https://codepen.io/jason-knight/pen/poZZpaK And a medium article about it: https://medium.com/codex/understanding-css-...ky-6d2b24c0af87 Notice I'm using EM or REM. REM is based on the browser default font-size and dynamically adjusts to the user preference. PX is an outmoded, outdated, dumbass measurement from accessibility standpoint that NEVER should have been used for web layout in the first place. No matter how many tutorials, fools, and outright frauds claim otherwise.. Whilst for most people 1REM == 16px, it can be set to almost anything such as my 1080p laptop where it's 20px, my 1440p workstation where it's 24px, and my 4k media center with the "ten foot interface" set to 32px. Prevents users with accessibility needs having to constantly play around adjusting zoom. I used a clamped value for the side padding so that it can dynamically shrink when the screen gets smaller. 8rem (128px for 16px default users) is excessively large (but then so is 100rem max-width) . If you're unfamiliar with clamp: clamp(min, value, max) So clamp (1rem, 2vw, 4rem) means that it is based on 2% of the viewport width, will not go smaller than 1rem, and no larger than 4rem. The H1 is easy: CODE h1 { font-size:2rem; } h1 span { font-weight:normal; } I advise AGAINST using numbered font-weights no matter how many PSD jockeys and Figma fools cream their pants over it. It is unreliable with certain fonts, freetype (*nix) hates it resulting in hard to read fonts... about the only people who like it are Mac users. The menu: CODE #mainMenu ul { list-style:none; display:flex; flex-wrap:wrap; gap:1rem; } Turn off the bullets, flex it, add a gap between the list items. Then for good measure I added a media query to strip off the columnar behavior for mobile when the screen is too small. CODE @media (max-width:48rem) { body > header { flex-direction:column; gap:0.5rem; } } Which is easy-peasy as all we have to do is flip the header's flex direction and add a gap. Try that with "grid" Here's a pen of that: https://codepen.io/jason-knight/pen/QWJjGER?editors=1100 Hope all this helps... though... oh, threads a month old and was bounced. Oh well, still might help someone. |
Lo-Fi Version | Time is now: 17th April 2024 - 06:34 AM |