feat: aligment and setting up grids

This commit is contained in:
Smigz 2023-11-14 14:26:15 -05:00
parent c67a8d62ce
commit ef61c387aa
2 changed files with 27 additions and 3 deletions

View file

@ -9,15 +9,35 @@
} }
.navbar h1,ul { .navbar ul {
grid-column: 1 / 2; grid-column: 1 / 2;
display: grid;
grid-template-rows: repeat(auto-fit, minmax(30px, 1fr));
justify-content: center;
gap: 20px;
} }
.topbar { .topbar {
grid-row: 1 / 2; grid-row: 1 / 2;
grid-column: 1 / 3; grid-column: 1 / 3;
} }
.topbar ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}
.topbar h1 {
margin-bottom: 50px;
justify-self: center;
}
.content { .content {
grid-column: 2 / 3; grid-column: 2 / 3;
} }
ul {
list-style-type: none;
}

View file

@ -10,7 +10,6 @@
<div class="container"> <div class="container">
<div class="sidebar"> <div class="sidebar">
<nav class="navbar"> <nav class="navbar">
<h1 class="nav-header">Dashboard</h1>
<ul> <ul>
<li>Home</li> <li>Home</li>
<li>Profile</li> <li>Profile</li>
@ -24,7 +23,12 @@
</nav> </nav>
</div> </div>
<div class="topbar"> <div class="topbar">
<ul>
<h1 class="topbar-header">Dashboard</h1>
<li>New</li>
<li>Upload</li>
<li>Share</li>
</ul>
</div> </div>
<div class="content"> <div class="content">