Question 192990 in Html Question posted in
Some basic documentation can be found here.

How can I split a 16-children HTML elements into 16×1 / 8×2 / 4×4 according to the parent width automatically?

I have a nav bar which contains 16 links.

On desktop screens, I want the 16 links be there in a row.

And when the window gets smaller, I want the 16 links to split into two lines with both 8 links.

And then when the window width gets very narrow, I want the 16 links split into 4×4 grid.

What can I do in CSS? Currently I have to hard code the width of the parent, which sounds very difficult to maintain or update in the future.

div {padding:.5em;margin:1em;border: 1px solid #000}

div#test1 {width:550px}
nav a {width:60px; background:#ff0; text-align:center;padding:.5em}
nav {display:flex; gap:.5em; flex-wrap: wrap;justify-content:center}

div#test2 {width:500px}


div#test3 {width:400px}


div#test4 {width:680px}
<h3>This is NOT good:</h3>
<div id="test1">

<nav>
  <a>br3f</a>
  <a>dfee</a>
  <a>xfef</a>
  <a>33fv</a>
  <a>vef3</a>
  <a>f3rr</a>
  <a>ber3</a>
  <a>b4t3</a>
  <a>nyjk</a>
  <a>dsfj</a>
  <a>rg4h</a>
  <a>nlkg</a>
  <a>gvre</a>
  <a>berg</a>
  <a>grgg</a>
  <a>gr4g</a>
</nav>

</div>



<h3>This is NOT good:</h3>
<div id="test2">

<nav>
  <a>br3f</a>
  <a>dfee</a>
  <a>xfef</a>
  <a>33fv</a>
  <a>vef3</a>
  <a>f3rr</a>
  <a>ber3</a>
  <a>b4t3</a>
  <a>nyjk</a>
  <a>dsfj</a>
  <a>rg4h</a>
  <a>nlkg</a>
  <a>gvre</a>
  <a>berg</a>
  <a>grgg</a>
  <a>gr4g</a>
</nav>

</div>


<h3>This is good:</h3>
<div id="test3">

<nav>
  <a>br3f</a>
  <a>dfee</a>
  <a>xfef</a>
  <a>33fv</a>
  <a>vef3</a>
  <a>f3rr</a>
  <a>ber3</a>
  <a>b4t3</a>
  <a>nyjk</a>
  <a>dsfj</a>
  <a>rg4h</a>
  <a>nlkg</a>
  <a>gvre</a>
  <a>berg</a>
  <a>grgg</a>
  <a>gr4g</a>
</nav>

</div>

<h3>This is good:</h3>
<div id="test4">

<nav>
  <a>br3f</a>
  <a>dfee</a>
  <a>xfef</a>
  <a>33fv</a>
  <a>vef3</a>
  <a>f3rr</a>
  <a>ber3</a>
  <a>b4t3</a>
  <a>nyjk</a>
  <a>dsfj</a>
  <a>rg4h</a>
  <a>nlkg</a>
  <a>gvre</a>
  <a>berg</a>
  <a>grgg</a>
  <a>gr4g</a>
</nav>

</div>
Tags:

2

Answers


  1. 0

    You should use a flex-box or grid to wrap all of these nav links. Then in your css, you can use media queries to make the layout change according to screen width.

    I recommend you learn about this as it is a very powerful tool to making responsive websites.

    Login or Signup to reply.
  2. 0

    Use grid layout for this. I have added media queries for max-width:500px and max-width:1200px yo can use any pixel value you want for your ** screen-break-points** and add more media queries if you want. repeat(4, 1fr) simply saves time writing grid-template-rows: 1fr 1fr 1fr 1fr; , so don’t be confused by that. Check this link to learn some basics about grid-layout: https://www.w3schools.com/css/css_grid.asp

    nav {
  padding: .5em;
  margin: 1em;
  border: 1px solid #000;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: .25rem;
}

nav a {
  width: 60px;
  background: #ff0;
  text-align: center;
  padding: .5em
}


/* 0- 500px screen-size for mobile/tablet put your own breakpoint here */

@media screen and (max-width:500px) {
  nav {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
}
/*for laptop/medium-desktop */
@media screen and (max-width:1200px) {
  nav {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}
    <h3>Navbbar :</h3>
<nav>
  <a>br3f</a>
  <a>dfee</a>
  <a>xfef</a>
  <a>33fv</a>
  <a>vef3</a>
  <a>f3rr</a>
  <a>ber3</a>
  <a>b4t3</a>
  <a>nyjk</a>
  <a>dsfj</a>
  <a>rg4h</a>
  <a>nlkg</a>
  <a>gvre</a>
  <a>berg</a>
  <a>grgg</a>
  <a>gr4g</a>
</nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search