Grid layout, nine palace layout

Write three column layout, forget grid, add it, and realize nine palace layout

Grid layout

<section class="grid">
       <article class="left-content-right">
           <div class="left">left</div>
           <div class="content">Grid layout</div>
           <div class="right">right</div>
.grid .left-content-right{min-width:500px;display: grid;width: 100%;
            		grid-template-rows: 100px;
            		grid-template-columns: 200px auto 200px;}
.left {background-color: red;}
.content {background-color: yellow;}
.right {background-color: blue;}

Layout of nine palaces

Using table to realize nine palace grid

<div class="body">
  <table class="table">
 * {margin: 0;padding: 0;}
    .body {margin:10px}
    .table {border-collapse: collapse;}
    .table td {text-align: center;
      vertical-align: middle;
      border-collapse: collapse;
      border: 1px solid black;
      position: relative;
    .table td span {
      position: relative;
      display: block;
      width: 15vw;
      height: 15vw;

To achieve red box selection when the mouse points to a certain cell, add: hover

.table td span:hover {
      position: absolute;
      left: -5px;
      top: -5px;
      border: 5px solid red;

Using ul li to realize nine palace lattice

	<ul class="clearfix">
	<ul class="clearfix">
	<ul class="clearfix">
*{margin: 0;padding: 0;}
	border: 1px solid #000;
	width: 60vw;
ul+ul{border-top: 1px solid #000; }
	width: 33.33333333333333333333%;
	height: 20vw;
	float: left;
	list-style: none;
li+li{	border-left: 1px solid #000;}
.clearfix:after { 
	content: "." ; 
	display: block ;
	height: 0 ;
	clear: both ;
	visibility: hidden ;
.clearfix{ display:block; }

Similarly, if you want to select a red box when the mouse points to a certain cell, you can add: hover, but the border of li can only be expanded internally, and no solution can be found:

li:hover{border:5px solid red;}



Posted on Fri, 31 Jan 2020 07:41:08 -0800 by kslagdive