网格布局

网格布局是最强大的 CSS 布局方案，它将网页划分成一个个网格，可以任意组合不同的网格做出各种各样的布局。

　　基本概念： display: grid; --- 创建网格容器。所有直接子元素都成为 -- grid items(网格项目)

　　属性：grid-template-columns -- 列宽，grid-template-rows -- 行高。

　　列宽：grid-template-columns:1fr 1fr 1fr; 如果设置 n 个值都一样的话可以用 repeat 函数，参数 1 是重复的次数，参数 2 是重复值。

　　行高：grid-template-rows: 3fr;  如果没有指定行高就会执行 grid-auto-rows。


<style>
    .container {
      display: grid;
      /* 列宽   auto：平均分布 */
      /* grid-template-columns: 1fr 1fr 1fr; */
      /* grid-template-columns: 200px 200px 200px; */
      /* 如果设置n个值都一样的话可以用 repeat() 函数，参数1是重复的次数，参数2是重复值 */
      /* fr可以用来等比例分配 */
      grid-template-columns: repeat(3, auto);
    }

    .item {
      padding: 3rem;
      border: #ccc solid 1px;
      background: #f4f4f4;
      font-size: 1.3rem;
      font-weight: bold;
      text-align: center;
    }

    main {
      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-gap: 1.5rem;
    }
  style>
<body>
  <div class="container">
    <div class="item">Item 1div>
    <div class="item">Item 2div>
    <div class="item">Item 3div>
  div>
  <main>
    <section>
      <h3>欢迎来到欧青拉少h3>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Obcaecati dolorum cum sint ipsum ratione fugiat
        dignissimos officia minus itaque hic.p>
    section>
    <aside>
      <h3>Hello Worldh3>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Obcaecati dolorum cum sint ipsum ratione fugiat
        dignissimos officia minus itaque hic.p>
    aside>
  main>
body>

  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      /* 行高 */
      grid-template-rows: 1fr 2fr 3fr;
      /* 没有指定行高的就会执行 grid-auto-rows */
      grid-auto-rows: 3fr;
    }

    .item {
      padding: 3rem;
      border: #ccc solid 1px;
      background: #f4f4f4;
      font-size: 1.3rem;
      font-weight: bold;
      text-align: center;
    }
  style>
<body>
  <div class="container">
    <div class="item">Item 1div>
    <div class="item">Item 2div>
    <div class="item">Item 3div>
    <div class="item">Item 4div>
    <div class="item">Item 5div>
    <div class="item">Item 6div>
  div>
body>

跨行跨列：grid-column-start：1; ---  左边框所在的网格线，grid-column-end: 4; --- 右边框所在的网格线。grid-row-start: 1; --- 上边框所在的网格线， grid-row-end: 3; --- 下边框所在的网格线。

　　跨行：grid-column: 1 / span 3; --- 左边框在第一个垂直网格线，并且横跨三个单元格。

　　跨列：grid-row: 1 / span 2; --- 上边框在第一个水平网格线，并且横跨两个单元格。span 表示横跨的单元格。

<style>
    .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }

    .item {
      padding: 3rem;
      border: 1px solid #ccc;
      background: #f4f4f4;
      font-size: 1.3rem;
      font-weight: bold;
      text-align: center;
    }

    .item:first-child {
      /* 左边框所在的网格线 */
      /* grid-column-start: 1; */
      /* 右边框所在的网格线 */
      /* grid-column-end: 4; */
      /* 上边框所在的网格线 */
      /* grid-row-start: 1; */
      /* 下边框所在的网格线 */
      /* grid-row-end: 3; */
      /* 跨列 */
      /* 左边框在第一个垂直网格线，并且横跨三个单元格 */
      grid-column: 1 / span 3;
      /* 跨行 */
      /* 左边框在第一个水平网格线，并且横跨两个单元格 */
      /* span表示横跨的单元格 */
      grid-row: 1 / span 2;
    }

    .item:nth-child(9) {
      grid-column: 1 / span 3;
      grid-row: 3 / span 2;
    }
  style>
<body>
  <div class="grid">
    <div class="item">Item 1div>
    <div class="item">Item 2div>
    <div class="item">Item 3div>
    <div class="item">Item 4div>
    <div class="item">Item 5div>
    <div class="item">Item 6div>
    <div class="item">Item 7div>
    <div class="item">Item 8div>
    <div class="item">Item 9div>
    <div class="item">Item 10div>
    <div class="item">Item 11div>
    <div class="item">Item 12div>
    <div class="item">Item 13div>
    <div class="item">Item 14div>
    <div class="item">Item 15div>
  div>
body>

minmax(100px，auto)：如果内容高度大于 100px 那么整个 div 的高度由内容撑开，如果小于 100px 那么 div 的高度就默认为 100px。

<style>
    .item {
      padding: 3rem;
      border: 1px solid #ccc;
      background: #f4f4f4;
      font-size: 1.3rem;
      font-weight: bold;
      text-align: center;
    }

    .grid {
      display: grid;
      /* 每个item的列宽不小于300px不大于1fr，如果视口宽度不能放下所有的item项的时候就进行换行，而多余的空间又平均分配给每个子元素 */
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
  style>
<body>
  <div class="grid">
    <div class="item">Item 1div>
    <div class="item">Item 2div>
    <div class="item">Item 3div>
    <div class="item">Item 4div>
  div>
body>

网格模板：grid-template-areas。

<style>
    .wrapper {
      display: grid;
      grid-template-areas:
        'header header header'
        'content content sidebar'
        'box-1 box-2 box-3'
        'footer footer footer'
      ;
      grid-gap: 1rem;
    }

    .header {
      grid-area: header;
    }

    .content {
      grid-area: content;
    }

    .sidebar {
      grid-area: sidebar;
    }

    .box-1 {
      grid-area: box-1;
    }

    .box-2 {
      grid-area: box-2;
    }

    .box-3 {
      grid-area: box-3;
    }

    .footer {
      grid-area: footer;
    }

    .header,
    .content,
    .sidebar,
    .box-1,
    .box-2,
    .box-3,
    .footer {
      border: 1px solid cyan;
    }

    @media (max-width:500px) {
      .wrapper {
        grid-template-areas:
          'header'
          'content'
          'sidebar'
          'box-1'
          'box-2'
          'box-3'
          'footer'
        ;
      }
    }
  style>
<body>
  <div class="wrapper">
    <header class="header">
      <h1>米修在线h1>
    header>
    <section class="content">
      <h3>Hello Worldh3>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium reiciendis placeat dicta omnis suscipit
        quidem delectus, assumenda eligendi aut quibusdam numquam eius ad earum vel beatae ex quasi accusamus, nobis
        quod repudiandae expedita. Assumenda alias et laudantium, quos saepe ipsa!
      p>
    section>
    <aside class="sidebar">
      <h3>联系我们h3>
      <ul>
        <li>米修在线li>
        <li>中国li>
        <li>米修在线@163.comli>
        <li>12345678li>
      ul>
    aside>
    <div class="box-1">
      <h3>标题一h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil alias fuga nisi excepturi ea nostrum corrupti
        consectetur aspernatur maxime facere quas, quaerat eligendi eos ducimus totam inventore? Eos, iste qui?
      p>
    div>
    <div class="box-2">
      <h3>标题二h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil alias fuga nisi excepturi ea nostrum corrupti
        consectetur aspernatur maxime facere quas, quaerat eligendi eos ducimus totam inventore? Eos, iste qui?
      p>
    div>
    <div class="box-3">
      <h3>标题三h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil alias fuga nisi excepturi ea nostrum corrupti
        consectetur aspernatur maxime facere quas, quaerat eligendi eos ducimus totam inventore? Eos, iste qui?
      p>
    div>
    <footer class="footer">
      <p>Coopyright © 2021p>
    footer>
  div>
body>

相关

标签