CSS макет с несколькими сетками 3х3, по одному в каждом углу - PullRequest
Новая
       0

CSS макет с несколькими сетками 3х3, по одному в каждом углу

0 голосов
/ 08 марта 2020

Я работаю на одном экране JavaScript веб-приложение. Он имеет несколько экранов, и пользователи могут выполнять некоторые тесты времени, чтобы получить общий балл. Я признаю, что я не эксперт в GUI дизайне, хотя мне совершенно комфортно работать с макетами Visual Studio xaml и Android Studio.

В данный момент я пытаюсь добавить новый экран, который должен иметь следующий макет. Он должен иметь прямоугольник в центре, с 4 сетками из квадратов 3х3, по одной сетке в каждом углу центрального прямоугольника и одним меньшим квадратом в середине. («Плюс» в середине может быть просто квадратом с изображением, я думаю).

enter image description here

Тогда есть некоторый код JavaScript, который должен измените цвета блоков в нескольких шаблонах, повторите пару раз и запросите определенный пользовательский ввод, но это самая простая часть.

Моя проблема заключается в том, чтобы получить требуемую разметку экрана на экране, что намного сложнее, чем я думал. Я нашел этот вопрос , но не смог заставить его работать должным образом.

После того, как я кое-что попробовал, см. Мой код ниже. Кстати, я только что создал отдельный файл HTML и CSS и начал экспериментировать, но если кто-то может предложить более эффективный подход, я весь слух. 

.container {
}

body {
	font-family: Arial;
	background: #080;
	overflow: "hidden";
}

/* color for blocks */
.red    {background: #f00;}
.orange {background: #f80;}
.yellow {background: #ff0;}
.green  {background: #0f0;}
.cyan   {background: #0ff;}
.blue   {background: #00f;}
.purple {background: #f0f;}

/* containing area for the four 3x3 grids */
.block3_area {
	width: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	background: #0cf;
}

/* one 3x3 grid */
.block3_grid {
	display: grid;
	grid-gap: 1px;
	grid-template-columns: repeat(3, 1fr);
	
	width: 30%;
	height: 30%;
}

.grid_tl {float: top left;}
.grid_tr {float: top right;}
.grid_bl {float: bottom-left;}
.grid_br {float: bottom-right;}

/* the inner blocks of the grid */
.game3block {
	width: 50px;
	height: 50px;
}

.game3block > .game3block {
  padding: 10px;
  background-color: #ccc;
}
<!DOCTYPE HTML>
<html>
	<head>
		<title>3x3 grid css test</title>
	</head>
	<link rel="stylesheet" type="text/css" href="grid.css">

	<body>

		<!-- game 3 -->
		<div class="block3_area">
			<div class="block3_grid grid_tl">
				<!-- top left grid, top row -->
				<div id="block_3_1_1" class="game3block bl3top red">TL-1</div>
				<div id="block_3_1_1" class="game3block bl3top red">TL-2</div>
				<div id="block_3_1_1" class="game3block bl3top red">TL-3</div>

				<!-- top left grid, middle row -->
				<div id="block_3_1_1" class="game3block bl3mid red">TL-4</div>
				<div id="block_3_1_1" class="game3block bl3mid red">TL-5</div>
				<div id="block_3_1_1" class="game3block bl3mid red">TL-6</div>

				<!-- top left grid, bottom row -->
				<div id="block_3_1_1" class="game3block bl3bot red">TL-7</div>
				<div id="block_3_1_1" class="game3block bl3bot red">TL-8</div>
				<div id="block_3_1_1" class="game3block bl3bot red">TL-9</div>
			</div>

			<div class="block3_grid grid_tr">
				<!-- top right grid, top row -->
				<div id="block_3_2_1" class="game3block green">TR-1</div>
				<div id="block_3_2_1" class="game3block green">TR-2</div>
				<div id="block_3_2_1" class="game3block green">TR-3</div>

				<!-- top right grid, middle row -->
				<div id="block_3_2_1" class="game3block green">TR-4</div>
				<div id="block_3_2_1" class="game3block green">TR-5</div>
				<div id="block_3_2_1" class="game3block green">TR-6</div>

				<!-- top right grid, bottom row -->
				<div id="block_3_2_1" class="game3block green">TR-7</div>
				<div id="block_3_2_1" class="game3block green">TR-8</div>
				<div id="block_3_2_1" class="game3block green">TR-9</div>
			</div>

			<div class="block3_grid grid_bl">
				<!-- bottom left grid, top row -->
				<div id="block_3_3_1" class="game3block blue">BL-1</div>
				<div id="block_3_3_1" class="game3block blue">BL-2</div>
				<div id="block_3_3_1" class="game3block blue">BL-3</div>

				<!-- bottom left grid, middle row -->
				<div id="block_3_3_1" class="game3block blue">BL-4</div>
				<div id="block_3_3_1" class="game3block blue">BL-5</div>
				<div id="block_3_3_1" class="game3block blue">BL-6</div>

				<!-- bottom left grid, bottom row -->
				<div id="block_3_3_1" class="game3block blue">BL-7</div>
				<div id="block_3_3_1" class="game3block blue">BL-8</div>
				<div id="block_3_3_1" class="game3block blue">BL-9</div>
			</div>

			<div class="block3_grid grid_br">
				<!-- bottom left grid, top row -->
				<div id="block_3_4_1" class="game3block yellow">BR-1</div>
				<div id="block_3_4_1" class="game3block yellow">BR-2</div>
				<div id="block_3_4_1" class="game3block yellow">BR-3</div>

				<!-- bottom left grid, middle row -->
				<div id="block_3_4_1" class="game3block yellow">BR-4</div>
				<div id="block_3_4_1" class="game3block yellow">BR-5</div>
				<div id="block_3_4_1" class="game3block yellow">BR-6</div>

				<!-- bottom left grid, bottom row -->
				<div id="block_3_4_1" class="game3block yellow">BR-7</div>
				<div id="block_3_4_1" class="game3block yellow">BR-8</div>
				<div id="block_3_4_1" class="game3block yellow">BR-9</div>
			</div>
		</div>
	</body>
</html>

Кто-нибудь знает, как получить этот макет? Любая помощь приветствуется.

Ответы [ 2 ]

0 голосов
/ 08 марта 2020

Flex и grid, если вы можете использовать их, могут вам помочь.

пример с дополнительным тегом для знака + , если он один: 

/* color for blocks */

.red {
  background: #f00;
}

.orange {
  background: #f80;
}

.yellow {
  background: #ff0;
}

.green {
  background: #0f0;
}

.cyan {
  background: #0ff;
}

.blue {
  background: #00f;
}

.purple {
  background: #f0f;
}

.block3_area>div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: max-content;
  grid-row: 1;
}

.block3_area>div>div {
  width: 3em;
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px white;
}

.block3_area>div.middle {
  grid-row: 2;
  grid-column: 2;
  width: min-content;
  text-align: center;
  justify-content: center;
  color: white;
  font-size: 50px;
  line-height: 25px;
}

.block3_area>div.middle~div {
  grid-row: 3;
}

.block3_area> :nth-child(2),
.block3_area> :nth-child(5) {
  grid-column: 3;
}

.block3_area {
  background: rgb(0, 192, 255);
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(3, auto);
  margin: auto;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  background: rgb(0, 128, 0);
}
<!-- game 3 -->
<div class="block3_area">
  <div class="block3_grid grid_tl">
    <!-- top left grid, top row -->
    <div id="block_3_1_1" class="game3block bl3top red">TL-1</div>
    <div id="block_3_1_1" class="game3block bl3top red">TL-2</div>
    <div id="block_3_1_1" class="game3block bl3top red">TL-3</div>

    <!-- top left grid, middle row -->
    <div id="block_3_1_1" class="game3block bl3mid red">TL-4</div>
    <div id="block_3_1_1" class="game3block bl3mid red">TL-5</div>
    <div id="block_3_1_1" class="game3block bl3mid red">TL-6</div>

    <!-- top left grid, bottom row -->
    <div id="block_3_1_1" class="game3block bl3bot red">TL-7</div>
    <div id="block_3_1_1" class="game3block bl3bot red">TL-8</div>
    <div id="block_3_1_1" class="game3block bl3bot red">TL-9</div>
  </div>

  <div class="block3_grid grid_tr">
    <!-- top right grid, top row -->
    <div id="block_3_2_1" class="game3block green">TR-1</div>
    <div id="block_3_2_1" class="game3block green">TR-2</div>
    <div id="block_3_2_1" class="game3block green">TR-3</div>

    <!-- top right grid, middle row -->
    <div id="block_3_2_1" class="game3block green">TR-4</div>
    <div id="block_3_2_1" class="game3block green">TR-5</div>
    <div id="block_3_2_1" class="game3block green">TR-6</div>

    <!-- top right grid, bottom row -->
    <div id="block_3_2_1" class="game3block green">TR-7</div>
    <div id="block_3_2_1" class="game3block green">TR-8</div>
    <div id="block_3_2_1" class="game3block green">TR-9</div>
  </div>
  <div class="middle">+</div>
  <div class="block3_grid grid_bl">
    <!-- bottom left grid, top row -->
    <div id="block_3_3_1" class="game3block blue">BL-1</div>
    <div id="block_3_3_1" class="game3block blue">BL-2</div>
    <div id="block_3_3_1" class="game3block blue">BL-3</div>

    <!-- bottom left grid, middle row -->
    <div id="block_3_3_1" class="game3block blue">BL-4</div>
    <div id="block_3_3_1" class="game3block blue">BL-5</div>
    <div id="block_3_3_1" class="game3block blue">BL-6</div>

    <!-- bottom left grid, bottom row -->
    <div id="block_3_3_1" class="game3block blue">BL-7</div>
    <div id="block_3_3_1" class="game3block blue">BL-8</div>
    <div id="block_3_3_1" class="game3block blue">BL-9</div>
  </div>

  <div class="block3_grid grid_br">
    <!-- bottom left grid, top row -->
    <div id="block_3_4_1" class="game3block yellow">BR-1</div>
    <div id="block_3_4_1" class="game3block yellow">BR-2</div>
    <div id="block_3_4_1" class="game3block yellow">BR-3</div>

    <!-- bottom left grid, middle row -->
    <div id="block_3_4_1" class="game3block yellow">BR-4</div>
    <div id="block_3_4_1" class="game3block yellow">BR-5</div>
    <div id="block_3_4_1" class="game3block yellow">BR-6</div>

    <!-- bottom left grid, bottom row -->
    <div id="block_3_4_1" class="game3block yellow">BR-7</div>
    <div id="block_3_4_1" class="game3block yellow">BR-8</div>
    <div id="block_3_4_1" class="game3block yellow">BR-9</div>
  </div>
</div>

https://codepen.io/gc-nomade/pen/LYVOqKV

или знак плюса, нарисованный на заднем плане, если он только о дизайне: 

/* color for blocks */

.red {
  background: #f00;
}

.orange {
  background: #f80;
}

.yellow {
  background: #ff0;
}

.green {
  background: #0f0;
}

.cyan {
  background: #0ff;
}

.blue {
  background: #00f;
}

.purple {
  background: #f0f;
}

.block3_area>div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: max-content;
  grid-row: 1;
  grid-column: 1;
}

.block3_area>div>div {
  width: 3em;
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px white;
}

.block3_area> :nth-child(2n) {
  grid-column: 2;
}

.block3_area> :nth-child(2)~div {
  grid-row: 2;
}

.block3_area {
  background: linear-gradient(white, white) no-repeat center center, linear-gradient(white, white) no-repeat center center rgb(0, 192, 255);
  background-size: 2px 2em, 2em 2px;
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
  margin: auto;
  grid-gap: 1.5em;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  background: rgb(0, 128, 0);
}
<!-- game 3 -->
<div class="block3_area">
  <div class="block3_grid grid_tl">
    <!-- top left grid, top row -->
    <div id="block_3_1_1" class="game3block bl3top red">TL-1</div>
    <div id="block_3_1_1" class="game3block bl3top red">TL-2</div>
    <div id="block_3_1_1" class="game3block bl3top red">TL-3</div>

    <!-- top left grid, middle row -->
    <div id="block_3_1_1" class="game3block bl3mid red">TL-4</div>
    <div id="block_3_1_1" class="game3block bl3mid red">TL-5</div>
    <div id="block_3_1_1" class="game3block bl3mid red">TL-6</div>

    <!-- top left grid, bottom row -->
    <div id="block_3_1_1" class="game3block bl3bot red">TL-7</div>
    <div id="block_3_1_1" class="game3block bl3bot red">TL-8</div>
    <div id="block_3_1_1" class="game3block bl3bot red">TL-9</div>
  </div>

  <div class="block3_grid grid_tr">
    <!-- top right grid, top row -->
    <div id="block_3_2_1" class="game3block green">TR-1</div>
    <div id="block_3_2_1" class="game3block green">TR-2</div>
    <div id="block_3_2_1" class="game3block green">TR-3</div>

    <!-- top right grid, middle row -->
    <div id="block_3_2_1" class="game3block green">TR-4</div>
    <div id="block_3_2_1" class="game3block green">TR-5</div>
    <div id="block_3_2_1" class="game3block green">TR-6</div>

    <!-- top right grid, bottom row -->
    <div id="block_3_2_1" class="game3block green">TR-7</div>
    <div id="block_3_2_1" class="game3block green">TR-8</div>
    <div id="block_3_2_1" class="game3block green">TR-9</div>
  </div>
  <div class="block3_grid grid_bl">
    <!-- bottom left grid, top row -->
    <div id="block_3_3_1" class="game3block blue">BL-1</div>
    <div id="block_3_3_1" class="game3block blue">BL-2</div>
    <div id="block_3_3_1" class="game3block blue">BL-3</div>

    <!-- bottom left grid, middle row -->
    <div id="block_3_3_1" class="game3block blue">BL-4</div>
    <div id="block_3_3_1" class="game3block blue">BL-5</div>
    <div id="block_3_3_1" class="game3block blue">BL-6</div>

    <!-- bottom left grid, bottom row -->
    <div id="block_3_3_1" class="game3block blue">BL-7</div>
    <div id="block_3_3_1" class="game3block blue">BL-8</div>
    <div id="block_3_3_1" class="game3block blue">BL-9</div>
  </div>

  <div class="block3_grid grid_br">
    <!-- bottom left grid, top row -->
    <div id="block_3_4_1" class="game3block yellow">BR-1</div>
    <div id="block_3_4_1" class="game3block yellow">BR-2</div>
    <div id="block_3_4_1" class="game3block yellow">BR-3</div>

    <!-- bottom left grid, middle row -->
    <div id="block_3_4_1" class="game3block yellow">BR-4</div>
    <div id="block_3_4_1" class="game3block yellow">BR-5</div>
    <div id="block_3_4_1" class="game3block yellow">BR-6</div>

    <!-- bottom left grid, bottom row -->
    <div id="block_3_4_1" class="game3block yellow">BR-7</div>
    <div id="block_3_4_1" class="game3block yellow">BR-8</div>
    <div id="block_3_4_1" class="game3block yellow">BR-9</div>
  </div>
</div>

https://codepen.io/gc-nomade/pen/dyoZaBG

, если вы не знакомы с grid и flex, эти ссылки могут быть вам полезны :

0 голосов
/ 08 марта 2020

https://codepen.io/ud-kazi/pen/poJdGLL 

body{
  background:green;
}

.wrapper{
  width:300px;
  height:300px;
  background:pink;
  margin:0 auto;
}

.blue{
  float:left;
  margin-bottom:10px;
}

.blue-box{
  
  margin-right:52px;
}

.blue-box div{
  height:40px;
  width:40px;
  background:blue;
  border:0.5px solid yellow;
  float:left;
}


.red{
  float:left;
   margin-bottom:10px;
}

.red-box{
  
}

.red-box div{
  height:40px;
  width:40px;
  background:red;
  border:0.5px solid yellow;
  float:left;
}


.orange{
  float:left;
}

.orange-box{
 
  margin-right:52px;
}

.orange-box div{
  height:40px;
  width:40px;
  background:red;
  border:0.5px solid orange;
  float:left;
}




.black{
  float:left;
}



.black-box div{
  height:40px;
  width:40px;
  background:black;
  border:0.5px solid yellow;
  float:left;
}

.plus{
  text-align:center;
  font-size:30px;
  color:white;
}
<div class="wrapper">
  <div class="blue">
    <div class="blue-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
    <div class="blue-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
     <div class="blue-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
  </div>
  <div class="red">
    <div class="red-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
    <div class="red-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
     <div class="red-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
  </div>
    
  <div class="plus">+</div>
  
    <div class="orange">
    <div class="orange-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
    <div class="orange-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
     <div class="orange-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
  </div>
  <div class="black">
    <div class="black-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
    <div class="black-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
     <div class="black-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...