Estou iniciando meus estudos com CSS Grid e para treinar estou tentando fazer um menu simples, a estrutura do meu grid tem 4 colunas por 4 linhas, assim como definido no código.
Eu estou tentando fazer o menu usando uma lista porem eu não faço a minima ideia de como posicionar esses elementos na minha grid, como eu vou posicioná-los de forma linear sendo que eu possuo 4 colunas e 4 linhas ?
Devo posicionar cada elemento em uma coluna ?
Posso posicionar todos os elementos mesmo o site tendo 4 colunas ?
Abaixo segue o meu código do que eu tentei fazer, porem não deu certo, se puderem me dar uma direção eu agradeço e muito !!!
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;
}
conteudo.css
ul {
box-sizing: border-box;
display: inline;
text-decoration: none;
}