css学习4--网格布局

网格布局

如下代码，使用网格布局来实现页面

<!doctype html>
<head>
  <style>
  :root {
    box-sizing: border-box;
  }

  *,
  ::before,
  ::after {
    box-sizing: inherit;
  }

  body {
    background-color: #709b90;
    font-family: Helvetica, Arial, sans-serif;
  }

  .container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(4, auto);
    grid-gap: 1.5em;
    max- 1080px;
    margin: 0 auto;
  }

  header,
  nav {
    grid-column: 1 / 3;
    grid-row: span 1;
  }

  .main {
    grid-column: 1 / 2;
    grid-row: 3 / 5;
  }

  .sidebar-top {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }

  .sidebar-bottom {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
  }

  .tile {
    padding: 1.5em;
    background-color: #fff;
  }

  .tile > :first-child {
    margin-top: 0;
  }

  .tile * + * {
    margin-top: 1.5em;
  }

  .page-heading {
    margin: 0;
  }

  .site-nav {
    display: flex;
    margin: 0;
    padding: .5em;
    background-color: #5f4b44;
    list-style-type: none;
    border-radius: .2em;
  }

  .site-nav > li {
    margin-top: 0;
  }

  .site-nav > li > a {
    display: block;
    padding: .5em 1em;
    background-color: #cc6b5a;
    color: white;
    text-decoration: none;
  }

  .site-nav > li + li {
    margin-left: 1.5em;
  }

  .site-nav > .nav-right {
    margin-left: auto;
  }

  .login-form h3 {
    margin: 0;
    font-size: .9em;
    font-weight: bold;
    text-align: right;
    text-transform: uppercase;
  }

  .login-form input:not([type=checkbox]):not([type=radio]) {
    display: block;
    margin-top: 0;
     100%;
  }

  .login-form button {
    margin-top: 1em;
    border: 1px solid #cc6b5a;
    background-color: white;
    padding: .5em 1em;
    cursor: pointer;
  }

  .centered {
    text-align: center;
  }

  .cost {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: .7;
  }

  .cost > span {
    margin-top: 0;
  }

  .cost-currency {
    font-size: 2rem;
  }
  .cost-dollars {
    font-size: 4rem;
  }
  .cost-cents {
    font-size: 1.5rem;
    align-self: flex-start;
  }

  .cta-button {
    display: block;
    background-color: #cc6b5a;
    color: white;
    padding: .5em 1em;
    text-decoration: none;
  }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1 class="page-heading">Ink</h1>
    </header>
    <nav>
      <ul class="site-nav">
        <li><a href="/">Home</a></li>
        <li><a href="/features">Features</a></li>
        <li><a href="/pricing">Pricing</a></li>
        <li><a href="/support">Support</a></li>
        <li class="nav-right">
          <a href="/about">About</a>
        </li>
      </ul>
    </nav>
    <main class="main tile">
      <h1>Team collaboration done right</h1>
      <p>Thousands of teams from all over the
        world turn to <b>Ink</b> to communicate
        and get things done.</p>
    </main>
    <div class="sidebar-top tile">
      <form class="login-form">
        <h3>Login</h3>
        <p>
          <label for="username">Username</label>
          <input id="username" type="text"
            name="username"/>
        </p>
        <p>
          <label for="password">Password</label>
          <input id="password" type="password"
            name="password"/>
        </p>
        <button type="submit">Login</button>
      </form>
    </div>
    <div class="sidebar-bottom tile centered">
      <small>Starting at</small>
      <div class="cost">
        <span class="cost-currency">$</span>
        <span class="cost-dollars">20</span>
        <span class="cost-cents">.00</span>
      </div>
      <a class="cta-button" href="/pricing">
        Sign up
      </a>
    </div>
  </div>
</body>

优化代码如下：

<!doctype html>
<head>
  <style>
  :root {
    box-sizing: border-box;
  }

  *,
  ::before,
  ::after {
    box-sizing: inherit;
  }

  body {
    background-color: #709b90;
    font-family: Helvetica, Arial, sans-serif;
  }

  .container {
    display: grid;
    grid-template-columns: [left-start] 2fr
                           [left-end right-start] 1fr
                           [right-end];
    grid-template-rows: repeat(4, [row] auto);
    grid-gap: 1.5em;
    max- 1080px;
    margin: 0 auto;
  }

  header,
  nav {
    grid-column: left-start / right-end;
    grid-row: span 1;
  }

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

  .sidebar-top {
    grid-column: right;
    grid-row: 3 / 4;
  }

  .sidebar-bottom {
    grid-column: right;
    grid-row: 4 / 5;
  }

  .tile {
    padding: 1.5em;
    background-color: #fff;
  }

  .tile > :first-child {
    margin-top: 0;
  }

  .tile * + * {
    margin-top: 1.5em;
  }

  .page-heading {
    margin: 0;
  }

  .site-nav {
    display: flex;
    margin: 0;
    padding: .5em;
    background-color: #5f4b44;
    list-style-type: none;
    border-radius: .2em;
  }

  .site-nav > li {
    margin-top: 0;
  }

  .site-nav > li > a {
    display: block;
    padding: .5em 1em;
    background-color: #cc6b5a;
    color: white;
    text-decoration: none;
  }

  .site-nav > li + li {
    margin-left: 1.5em;
  }

  .site-nav > .nav-right {
    margin-left: auto;
  }

  .login-form h3 {
    margin: 0;
    font-size: .9em;
    font-weight: bold;
    text-align: right;
    text-transform: uppercase;
  }

  .login-form input:not([type=checkbox]):not([type=radio]) {
    display: block;
    margin-top: 0;
     100%;
  }

  .login-form button {
    margin-top: 1em;
    border: 1px solid #cc6b5a;
    background-color: white;
    padding: .5em 1em;
    cursor: pointer;
  }

  .centered {
    text-align: center;
  }

  .cost {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: .7;
  }

  .cost > span {
    margin-top: 0;
  }

  .cost-currency {
    font-size: 2rem;
  }
  .cost-dollars {
    font-size: 4rem;
  }
  .cost-cents {
    font-size: 1.5rem;
    align-self: flex-start;
  }

  .cta-button {
    display: block;
    background-color: #cc6b5a;
    color: white;
    padding: .5em 1em;
    text-decoration: none;
  }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1 class="page-heading">Ink</h1>
    </header>
    <nav>
      <ul class="site-nav">
        <li><a href="/">Home</a></li>
        <li><a href="/features">Features</a></li>
        <li><a href="/pricing">Pricing</a></li>
        <li><a href="/support">Support</a></li>
        <li class="nav-right">
          <a href="/about">About</a>
        </li>
      </ul>
    </nav>
    <main class="main tile">
      <h1>Team collaboration done right</h1>
      <p>Thousands of teams from all over the
        world turn to <b>Ink</b> to communicate
        and get things done.</p>
    </main>
    <div class="sidebar-top tile">
      <form class="login-form">
        <h3>Login</h3>
        <p>
          <label for="username">Username</label>
          <input id="username" type="text"
            name="username"/>
        </p>
        <p>
          <label for="password">Password</label>
          <input id="password" type="password"
            name="password"/>
        </p>
        <button type="submit">Login</button>
      </form>
    </div>
    <div class="sidebar-bottom tile centered">
      <small>Starting at</small>
      <div class="cost">
        <span class="cost-currency">$</span>
        <span class="cost-dollars">20</span>
        <span class="cost-cents">.00</span>
      </div>
      <a class="cta-button" href="/pricing">
        Sign up
      </a>
    </div>
  </div>
</body>

相关阅读:
jQuery.Ajax()执行WCF Service的方法
 呼叫WCF Service的方法出现Method not allowed异常
 ASP.NET MVC呼叫WCF Service的方法
 表格行与列mouse经过时高亮显示
 Git管理项目实例说明-记录和跟踪项目
 Maven私服Nexus3.x环境构建操作记录
 Nginx部署web缓存服务环境
 Mysql连接错误：Lost connection to Mysql server at 'waiting for initial communication packet'
Linux下修改系统编码的操作记录
 web cache server方案比较：varnish、squid、nginx
原文地址：https://www.cnblogs.com/zdjBlog/p/13985333.html