Menu using Css Grid

Asked

Viewed 447 times

3

I’m starting my studies with CSS Grid and to train I’m trying to make a simple menu, the structure of my grid has 4 columns for 4 lines, as defined in the code.

I am trying to make the menu using a list but I have no idea how to position these elements on my grid, as I will position them in a linear way and I have 4 columns and 4 rows ?

I must place each element in a column ?

I can position all elements even the site having 4 columns ?

Below follows my code of what I tried to do, but it did not work, if you can give me a direction I thank you and much !!!

index.html

<body>
   <div class="container">

    <div class="item1">
        <ul class="texto">
            <li>Inicio</li>
            <li>Sobre</li>
            <li>Github</li>
            <li>Linkedin</li>
        </ul>
    </div>
    <div class="item2">Header</div>
    <div class="item3">Conteudo</div>
    <div class="item4">Footer</div>

    </div>
 </body>

main css.

* {margin: 0px;}

.item1 {grid-area: menu;}

.item2 { grid-area: cabecalho;}

.item3 {grid-area: conteudo;}

.item4 {grid-area: rodape;}

.container {
    display: grid;
    grid-template-rows: 100px 200px 400px 200px;
    grid-template-areas: 'menu menu menu menu'
                     'cabecalho cabecalho cabecalho cabecalho'
                     'conteudo conteudo conteudo conteudo'
                     'rodape rodape rodape rodape';
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
    }

.container > div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
    }

css content.

ul {
box-sizing: border-box;
display: inline;
text-decoration: none;
}
html5 css3

1 answer

1


Basically your problem is that you put the display:inline in UL and should be in the LI

inserir a descrição da imagem aqui

Now if you want each LI item of your UL to stay inside a Grid column you will have to make one Sub-Grid, which is actually a Grid within another... since the Sub-Grid has not yet been made official by W3C. For this purpose put disply:grid tb in the UL and divide into 4 columns as you did in the main Grid

Here’s an article on the Sub-Grid: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid I do not recommend that you read until you understand well the operation of the Grid rss normal, but basically it is to reuse in the Son the Grid of the Father, but currently it is not possible, you have to redo the Grid in the Son as I said...

See the image code above

* {
  margin: 0px;
}

.item1 {
  grid-area: menu;
}

.item2 {
  grid-area: cabecalho;
}

.item3 {
  grid-area: conteudo;
}

.item4 {
  grid-area: rodape;
}

.container {
  display: grid;
  grid-template-rows: 100px 200px 400px 200px;
  grid-template-areas: 'menu menu menu menu'
    'cabecalho cabecalho cabecalho cabecalho'
    'conteudo conteudo conteudo conteudo'
    'rodape rodape rodape rodape';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.container>div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}


ul {
  box-sizing: border-box;
  text-decoration: none;
}

li {
  display: inline;
}
<div class="container">

  <div class="item1">
    <ul class="texto">
      <li>Inicio</li>
      <li>Sobre</li>
      <li>Github</li>
      <li>Linkedin</li>
    </ul>
  </div>
  <div class="item2">Header</div>
  <div class="item3">Conteudo</div>
  <div class="item4">Footer</div>

</div>

EDIT - Alternative Grid / Sub-Grid

inserir a descrição da imagem aqui

In this example above I divided the UL into 4, so that each column of it was equal to the division made in the Pai container. for this I used grid-template-columns: repeat(4, 1fr);

* {
  margin: 0px;
}

.item1 {
  grid-area: menu;
}

.item2 {
  grid-area: cabecalho;
}

.item3 {
  grid-area: conteudo;
}

.item4 {
  grid-area: rodape;
}

.container {
  display: grid;
  grid-template-rows: 100px 200px 400px 200px;
  grid-template-areas: 'menu menu menu menu'
    'cabecalho cabecalho cabecalho cabecalho'
    'conteudo conteudo conteudo conteudo'
    'rodape rodape rodape rodape';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.container>div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}


ul {
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
<div class="container">

  <div class="item1">
    <ul class="texto">
      <li>Inicio</li>
      <li>Sobre</li>
      <li>Github</li>
      <li>Linkedin</li>
    </ul>
  </div>
  <div class="item2">Header</div>
  <div class="item3">Conteudo</div>
  <div class="item4">Footer</div>

</div>

EDIT - Alternative Grid + Flex

As you want the menu horizontal, use a Container Flex Inside a Grid Track may be the perfect solution. But to equalize the internal items you need to put flex:1; in LI

inserir a descrição da imagem aqui

Just put it on your UL the properties display: flex; and justify-content: space-around; to distribute the items as in the image above

See the code below

* {
  margin: 0px;
}

.item1 {
  grid-area: menu;
}

.item2 {
  grid-area: cabecalho;
}

.item3 {
  grid-area: conteudo;
}

.item4 {
  grid-area: rodape;
}

.container {
  display: grid;
  grid-template-rows: 100px 200px 400px 200px;
  grid-template-areas: 'menu menu menu menu'
    'cabecalho cabecalho cabecalho cabecalho'
    'conteudo conteudo conteudo conteudo'
    'rodape rodape rodape rodape';

  background-color: #2196F3;
  padding: 10px;
}

.container>div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}


ul {
  box-sizing: border-box;
  text-decoration: none;
  display: flex;
  justify-content: space-around;
  padding: 0;
}

li {
  display: inline;
  flex:1;
}
<div class="container">

  <div class="item1">
    <ul class="texto">
      <li>Inicio</li>
      <li>Sobre</li>
      <li>Github</li>
      <li>Linkedin</li>
    </ul>
  </div>
  <div class="item2">Header</div>
  <div class="item3">Conteudo</div>
  <div class="item4">Footer</div>

</div>

  • Thanks for the help, I asked if it was possible to put word face in a different column because I thought that was the right way to do it but as I saw n seems very productive kkk, one more question I could use flex-box to "set" the elements in each column or it would not be "correct" to do ? pq n have market experience so would like to do something similar to reality, Thank you !

  • @Giovannimanganotti yes this is a great opportunity to join Grid + Flex, see the EDIT which I did at the end of the reply including this option to use Flex to distribute the Menu items

  • humm just saw, understood how it works, now it’s a little clearer this idea of using flex-box along with css grid, Thanks for the help !!!

  • @Giovannimanganotti if you are interested I made a new edition in the answer, I corrected a config of Felx in the LI to be more aligned with the Grid of the Father’s olunas, and also I made a new code this time using a Sub-Grid, putting Display:Grid in the UL also to align the LI right

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.