如何让这些网格项对齐？

问题描述 投票：0回答：1

我正在做 Odin 项目的管理仪表板练习，但无法让网格按照我想要的方式排列。我希望“公告”和“趋势”div 与“项目”div 保持一致。可以在这里看到它的外观示例：

https://cdn.statically.io/gh/TheOdinProject/curriculum/43cc6ab69fdfbef40d431a65677d2144668930ac/intermediate_html_css/grid/project_admin_dashboard/imgs/dashboard-project.png

这是我的代码：https://codepen.io/ofgaard/pen/ZEwymJW

如何使公告和趋势 div 与项目 div 保持一致，并在它们之间分割项目 div 的整个高度？

谢谢

    <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
</head>
<body>
<div class="container">
    <div class="sidebar">
        <div class="sidebar-logo">
            <div class="sidebar-logo-icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="50px" width="50px"><title>view-dashboard</title><path d="M13,3V9H21V3M13,21H21V11H13M3,21H11V15H3M3,13H11V3H3V13Z" /></svg>
            </div>
            <div class="sidebar-logo-text">
                <h4>Dashboard</h4>
            </div>
        </div>
        <div class="sidebar-top-menu">
            <ul>
                <li class="sidebar-menu-item">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="10%" width="10%"><title>home</title><path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /></svg>
                    <p>Home</p>
                </li>
                <li class="sidebar-menu-item">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="10%" width="10%"><title>account-settings</title><path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14M7,22H9V24H7V22M11,22H13V24H11V22M15,22H17V24H15V22Z" /></svg>
                    <p>Profile</p>
                </li>
                <li class="sidebar-menu-item">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="10%" width="10%"><title>message-fast-outline</title><path d="M20 5H9C7.9 5 7 5.9 7 7V21L11 17H20C21.1 17 22 16.1 22 15V7C22 5.9 21.1 5 20 5M20 15H10.2L9 16.2V7H20V15M3 7C2.4 7 2 7.4 2 8S2.4 9 3 9H5V7H3M2 11C1.4 11 1 11.4 1 12S1.4 13 2 13H5V11H2M1 15C.4 15 0 15.4 0 16C0 16.6 .4 17 1 17H5V15H1Z" /></svg>
                    <p>Messages</p>
                </li>
                <li class="sidebar-menu-item">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="10%" width="10%"><title>history</title><path d="M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3" /></svg>
                    <p>History</p>
                </li>
                <li class="sidebar-menu-item">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="10%" width="10%"><title>calendar-check</title><path d="M19,19H5V8H19M19,3H18V1H16V3H8V1H6V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M16.53,11.06L15.47,10L10.59,14.88L8.47,12.76L7.41,13.82L10.59,17L16.53,11.06Z" /></svg>
                    <p>Tasks</p>
                </li>
            </ul>
        </div>
        <div class="sidebar-bottom-menu">
            <ul>
                <li class="sidebar-menu-item">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="10%" width="10%"><title>calendar-check</title><path d="M19,19H5V8H19M19,3H18V1H16V3H8V1H6V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M16.53,11.06L15.47,10L10.59,14.88L8.47,12.76L7.41,13.82L10.59,17L16.53,11.06Z" /></svg>
                    <p>Settings</p>
                </li>
                <li class="sidebar-menu-item">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="10%" width="10%"><title>calendar-check</title><path d="M19,19H5V8H19M19,3H18V1H16V3H8V1H6V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M16.53,11.06L15.47,10L10.59,14.88L8.47,12.76L7.41,13.82L10.59,17L16.53,11.06Z" /></svg>
                    <p>Support</p>
                </li>
                <li class="sidebar-menu-item">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="10%" width="10%"><title>calendar-check</title><path d="M19,19H5V8H19M19,3H18V1H16V3H8V1H6V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M16.53,11.06L15.47,10L10.59,14.88L8.47,12.76L7.41,13.82L10.59,17L16.53,11.06Z" /></svg>
                    <p>Privacy</p>
                </li>
            </ul>

        </div>
    </div>
    <div class="main">
        <div class="header">
            <div class="navbar">
                <div class="navbar-search">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="5%" width="5%"><title>magnify</title><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" /></svg>
                    <input type="search">
                </div>
                <div class="navbar-user">
                    <div class="navbar-user-item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="50px" width="50px"><title>bell-alert-outline</title><path d="M12 2A2 2 0 0 0 10 4A2 2 0 0 0 10 4.29C7.12 5.14 5 7.82 5 11V17L3 19V20H21V19L19 17V11C19 7.82 16.88 5.14 14 4.29A2 2 0 0 0 14 4A2 2 0 0 0 12 2M12 6A5 5 0 0 1 17 11V18H7V11A5 5 0 0 1 12 6M21 7V13H23V7H21M21 15V17H23V15H21M10 21A2 2 0 0 0 12 23A2 2 0 0 0 14 21H10Z" /></svg></div>
                    <div class="navbar-user-item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="50px" width="50px"><title>face-man-profile</title><path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,8.39C13.57,9.4 15.42,10 17.42,10C18.2,10 18.95,9.91 19.67,9.74C19.88,10.45 20,11.21 20,12C20,16.41 16.41,20 12,20C9,20 6.39,18.34 5,15.89L6.75,14V13A1.25,1.25 0 0,1 8,11.75A1.25,1.25 0 0,1 9.25,13V14H12M16,11.75A1.25,1.25 0 0,0 14.75,13A1.25,1.25 0 0,0 16,14.25A1.25,1.25 0 0,0 17.25,13A1.25,1.25 0 0,0 16,11.75Z" /></svg></div>
                    <div class="navbar-user-item"><h3>LarsLarsen</h3></div>
                    
                    
                </div>
            </div>
            <div class="profile">
                <div class="profile-welcome">
                    <div class="profile-welcome-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="100px" width="100px"><title>face-man-profile</title><path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,8.39C13.57,9.4 15.42,10 17.42,10C18.2,10 18.95,9.91 19.67,9.74C19.88,10.45 20,11.21 20,12C20,16.41 16.41,20 12,20C9,20 6.39,18.34 5,15.89L6.75,14V13A1.25,1.25 0 0,1 8,11.75A1.25,1.25 0 0,1 9.25,13V14H12M16,11.75A1.25,1.25 0 0,0 14.75,13A1.25,1.25 0 0,0 16,14.25A1.25,1.25 0 0,0 17.25,13A1.25,1.25 0 0,0 16,11.75Z" /></svg>

                    </div>
                    <div class="profile-welcome-text">
                        <p>Hi there,</p>
                        <h1>LarsLarsen</h1>
                    </div>
                </div>
            <div class="profile-buttons">
                <button class="profile-btn">New</button>
                <button class="profile-btn">Upload</button>
                <button class="profile-btn">Share</button>
            </div>
            </div>
        </div>
        <div class="content">
            <div class="projects">
                <h2>Projects</h2>
                <div class="cards">
                    <div class="card-item">
                        <h3>Cool Project</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus itaque, beatae amet reprehenderit numquam veniam </p>
                    </div>
                    <div class="card-item">
                        <h3>Cool Project</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus itaque, beatae amet reprehenderit numquam veniam </p>
                    </div>
                    <div class="card-item">
                        <h3>Cool Project</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus itaque, beatae amet reprehenderit numquam veniam </p>
                    </div>
                    <div class="card-item">
                        <h3>Cool Project</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus itaque, beatae amet reprehenderit numquam veniam </p>
                    </div>
                    <div class="card-item">
                        <h3>Cool Project</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus itaque, beatae amet reprehenderit numquam veniam </p>
                    </div>
                    <div class="card-item">
                        <h3>Cool Project</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus itaque, beatae amet reprehenderit numquam veniam </p>
                    </div>
                </div>
            </div>
            <div class="ann-trending">
                    <div class="ann">
                        <h2>Announcements</h2>
                    <div class="ann-card">
                        <div class="ann-text">
                            <h3>Site Maintenance</h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga corporis sint iure eum distinctio laboriosam explicabo</p>
                            <div class="divider"></div>
                        </div>
                        <div class="ann-text">
                            <h3>Site Maintenance</h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga corporis sint iure eum distinctio laboriosam explicabo</p>
                        <div class="divider"></div>
                        </div>
                        <div class="ann-text">
                            <h3>Site Maintenance</h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga corporis sint iure eum distinctio laboriosam explicabo</p>
                        </div>
                    </div>
                    </div>
                    <div class="trend">
                        <h2>Trends</h2>
                        <div class="trend-card">
                        </div>
                    </div>
                </div>
            </div> 
        </div>
    </div>
</div>

    
</body>
</html>


    @import url('https://fonts.googleapis.com/css2?family=Anton&family=Roboto:wght@400;500&display=swap');

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Anton', sans-serif;
    font-family: 'Roboto', sans-serif;
}

.container {
    display: grid;
    grid-template-columns: 20% 80%;
    height: 100vh;
}
.sidebar {
    background-color: #082f49;
    color: whitesmoke;
    fill: whitesmoke;
    height: 100vh;
}

ul {
    list-style-type: none;
}

.sidebar-menu-item {
    display: flex;
    flex-direction: row;
    margin-bottom: 8%;
    gap: 5%;
    align-items: center;
}

.sidebar-logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10%;
    margin-left: 5%;
    margin-top: 5%;
}


.sidebar-top-menu, .sidebar-bottom-menu {
    margin-left: 15%;
    margin-top: 40%;
}

.main {
    display: grid;
    grid-template-rows: 20% 80%;
}

.header {
    display: grid;
    grid-template-rows: 50% 50%;
    margin-left: 7%;
    margin-right: 20%;
}

.navbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20%;
}

.navbar-user {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15%;
}


.navbar-search {
    display: flex;
    flex-direction: row;
    gap: 5%;

}

.navbar-search > input {
    width: 700px;
    border-radius: 10px;
}


.profile {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 60%; 
}

.profile-welcome {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5%;
}

.profile-buttons {
    display: flex;
    flex-direction: row;
    gap: 40%;
}
.profile-btn {
    
    background-color: #082f49;
    color: white;
    padding: 15%;
    border-radius: 20px;
    border-style: none;
}

.content {
    display: grid;
    grid-template-columns: 70% 30%;
    background-color:#f3f4f6;
    padding-left: 10%;
    padding-top: 8%;
    max-height: 100vh;
    padding-right: 10%;
}

.projects {
    display: flex;
    flex-direction: column;
    gap: 5%;
}

.cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

.card-item {
    background-color: white;
    margin-bottom: 10%;
    display: flex;
    flex-direction: column;
    max-width: 60%;
    border-left: 2px solid black;
    padding: 5%;
    border-radius: 8px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.065);
}

.ann-trending {
    display: grid;
    grid-template-rows: 1fr 1fr;
}

.ann-text > p {
    font-size: 10px;
}

.ann-text > h3 {
    font-size: 14px;
}

.ann-card, .trend-card {
    display: flex;
    flex-direction: column;
    background-color: white;
    height: 50%;
    padding: 10%;
    border-radius: 8px;
    gap: 6%;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.065);
}

.trend {
    display: flex;
    flex-direction: column;
}

.ann {
    display: flex;
    flex-direction: column;
    gap: 5%;
}

.ann > h2 {
    margin-bottom: 7%;
}

.divider {
    margin-top: 4%;
    border: solid 1px #f3f4f6;
}

.trend > h2 {
    margin-bottom: 10%;
}
css grid
1个回答
0
投票

您可以通过定义一些包含 

.block
和 
.block-header
的包装器（下例中的 
.block-content
）来完成此操作。

任何内容都将进入

.block-content
- 它可能是卡片、包含卡片的网格，或您想要的任何其他内容。

通过调整 

.block-header
样式，您可以使其大小达到您想要的任何大小，并且块之间将保持一致。

请注意，我正在使用 

.outer-grid
（与 
.left
、
.right-1
和 
.right-2
类）来定义每个 
.block
的位置。

:root {
  --pad: .5rem;
  --gap: 1rem;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  font-family: Roboto, sans-serif;
  background: #E0E0E0;
}

.container {
  height: 100vh;
  min-height: 500px;
  border: 4px solid #9C27B0;
  padding: var(--pad);
}

.outer-grid {
  padding: var(--pad);
  height: 100%;
  display: grid;
  grid-template-columns: 5fr 2fr;
  grid-gap: var(--gap);
  border: 4px solid #1B5E20;
}

.block {
  padding: var(--pad);
  border: 4px solid black;
  display: flex;
  flex-direction: column;
}

.block-header {
  border: 4px solid #E91E63;
  padding: var(--pad);
  font-size: 1.5rem;
  font-weight: bold;
}

.block-content {
  border: 4px solid #2196F3;
  flex-grow: 1;
}

.left {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.right-1 {
  grid-column: 2;
  grid-row: 1;
}

.right-2 {
  grid-column: 2;
  grid-row: 2;
}

.inner-grid {
  height: 100%;
  grid-gap: var(--gap);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.card {
  height: 100%;
  border: 4px solid #EF6C00;
  padding: .5rem;
}
<div class="container">
  <div class="outer-grid">
    <div class="block left">
      <div class="block-header">L</div>
      <div class="block-content">
        <div class="inner-grid">
          <div class="card">Lorem ipsum</div>
          <div class="card">Lorem ipsum</div>
          <div class="card">Lorem ipsum</div>
          <div class="card">Lorem ipsum</div>
          <div class="card">Lorem ipsum</div>
          <div class="card">Lorem ipsum</div>
        </div>
      </div>
    </div>
    <div class="block right-1">
      <div class="block-header">R1</div>
      <div class="block-content">
        <div class="card">Lorem ipsum</div>
      </div>
    </div>
    <div class="block right-2">
      <div class="block-header">R2</div>
      <div class="block-content">
        <div class="card">Lorem ipsum</div>
      </div>
    </div>
  </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.