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>
       </article>
</section>
.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">
    <tr>
      <td><span>1</span></td>
      <td><span>2</span></td>
      <td><span>3</span></td>
    </tr>
    <tr>
      <td><span>4</span></td>
      <td><span>5</span></td>
      <td><span>6</span></td>
    </tr>
    <tr>
      <td><span>7</span></td>
      <td><span>8</span></td>
      <td><span>9</span></td>
    </tr>
  </table>
</div>
 * {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;
      line-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

<div>
	<ul class="clearfix">
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
	<ul class="clearfix">
		<li>4</li>
		<li>5</li>
		<li>6</li>
	</ul>
	<ul class="clearfix">
		<li>7</li>
		<li>8</li>
		<li>9</li>
	</ul>
</div>
*{margin: 0;padding: 0;}
div{
	margin:1vw;
	border: 1px solid #000;
	width: 60vw;
}
ul+ul{border-top: 1px solid #000; }
li{
	width: 33.33333333333333333333%;
	height: 20vw;
	float: left;
	list-style: none;
	box-sizing:border-box;
	text-align:center;
	line-height:20vw;
}
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