The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Grid-Template-Columns Help
oddcarout
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post May 15 2023, 04:06 PM
Post #2


Advanced Member
****

Group: Members
Posts: 194
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



Hi there oddcarout,

this...
CODE

header .container nav {
   display: grid;
   grid-gap: 16px;
   grid-template-columns: repeat(5, auto);
}

...should be...
CODE

header .menu-flex {
   display: grid;
   grid-gap: 16px;
   grid-template-columns: repeat(5, auto);
}


You might also wish to add...
CODE

   align-items: center;

..to this...
CODE

header .container {

}


Also note that at 878px page width you should
consider placing the links below the h2 element
in a @media setting like this...
CODE

@media (max-width: 878px){
header .container {
   flex-direction: column;
  }
}

I hope that this will help your progress. IPB Image


coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jpolfg999
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jason Knight
post 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.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 02:49 PM