Grid layout

  • Gird-template-row (columns) sets column and column properties
  • Gap sets the grid line width
  • Grid-template-area names cells
  • Grid-column and grid-row set the position of the element in the container
  • Align-content sets the alignment of the grid container, and context-items and align-items set the alignment of all child elements in the grid container. Context-self, align-self sets the alignment of individual child elements in the container.
<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <div class="grid">
      <div></div>
      <div class="special"></div>
      <div></div>
      <div></div>
      <div class="special"></div>
      <div></div>
      <div class="special"></div>
      <div></div>
    </div>
  </body>
</html>
Copy the code
:root {
  box-sizing: border-box;
}

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

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

body * + * {
  margin-top: 1.5 em;
}

.grid {
  width: 1080px;
  height: 600px;
  background-color: white;
  display: grid;
  grid-template-columns: repeat(6.150px);
  grid-template-rows: repeat(3.150px);
  gap: 1em;
  justify-items: center;
  align-items: center;
  justify-content: space-between;
  align-content: space-around;
}

.grid > div {
  margin: 0;
  width: 100px;
  height: 100px;
  background-color: blue;
}

.grid > div.special {
  align-self: flex-end;
  justify-self: start;
  height: 300px;
  grid-row: span 2;
}

Copy the code

Positioning, hierarchy

  • Fixed Indicates a fixed position in the view window
  • Absolute An absolute location based on the ancestor element
  • You cannot change the size of an element by setting both left/right and top/bottom
  • The sticky position is related to the size of the parent element. The setting takes effect when the parent element is about to leave the viewport, and the parent element does not leave the viewport, relative to the viewport position, otherwise the setting is invalid.
  • The smaller the value of the z-index sibling element, the earlier it is rendered

Responsive layout

  • Do the mobile layout first, then write the layout step by step based on viewport width.
  • @media uses the media finder to set different layouts for different sizes, vertical and horizontal screens, etc.