Проблема с позиционированием элемента поля внутри сетки CSS

Я изучаю HTML и CSS, и сейчас я изучаю CSS Grid.

Я думаю, что понимаю, как работает CSS Grid, и я пытался написать веб-сайт с элементом поля, расположенным в определенном месте внутри сетки.

Я сделал снимок экрана и нарисовал квадрат там, где я пытаюсь разместить элемент контейнера. Я пытался расположить его с помощью grid-column и grid-row, но теперь это не помогло.

введите здесь описание изображения

(Этот сплошной черный прямоугольник должен смотреть на рисунок с краской в ​​виде контейнерной коробки)

Вот мой код:

body {
  background: #aaa;
}

html,
body,
.header-bar {
  height: 100%;
  margin: 0;
}

.header-grid {
  display: grid;
  grid-template: 100px / 1fr 1fr 1fr;
}

.header-bar {
  grid-column: 1/4;
  background: #ccc;
  margin-bottom:
}

.menu-items ul {
  margin: 0;
  padding: 0;
}

.menu-items li {
  list-style: none;
  float: left;
  margin-right: 10px;
  background-color: #aaa;
  position: relative;
  line-height: 60px;
}

.menu-items {
  grid-row: 1/2;
  grid-column: 1/2;
  float: left;
  margin-left: 20px;
  margin-top: 18px;
}

.img {
  height: 70px;
  width: 90px;
  float: left;
  margin-left: 100px;
  margin-top: 10px;
}

.container-box {
  background: #000;
  width: 18em;
  grid-column: 3/4;
  grid-row: ;
}


/*float clearfix */

.list-items:after {
  content: "";
  display: table;
  clear: both;
}

.header-bar:after {
  content: "";
  display: table;
  clear: both;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="header-grid">
    <header class="header-bar">
      <img src="img/shop.png" class="img">
      <nav class="menu-items">
        <ul class="list-items">
          <li>Categories</li>
          <li>Gifts</li>
          <li>Giveaways</li>
          <li>Exclusive</li>
        </ul>
      </nav>
    </header>
  </div>
  <div class="container-box">
    test
  </div>
</body>

</html>

Кроме того, если вы обнаружите смысловую ошибку, сообщите мне об этом.


html css css-grid grid
person Jorge Gill    schedule 24.01.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Молодец, что пытаешься научиться этим вещам самостоятельно! Итак, пара вещей: - Вы оставили пустыми некоторые стили css. Будьте осторожны, чтобы не делать этого, так как это может действовать непредсказуемо в некоторых браузерах. margin-bottom в '.header-bar' например

  • При работе с flexbox или grid единственными элементами, на которые будут воздействовать, будут их непосредственные дочерние элементы. Таким образом, в случае «.header-grid» единственным дочерним элементом является «.header-bar», поэтому делать его сеткой излишне.

  • Возвращаясь к последнему пункту, вы можете понять, почему у вас что-то не работает. '.container-box', который вы хотите разместить в этом месте, не имеет родительского элемента, который является сеткой, поэтому сетка не повлияет на него. То, как вы это исправите, зависит от вашего плана на будущее. Вы можете просто добавить немного поля слева и сверху. Около 200px и 100px соответственно. Вы также можете сделать что-то вроде этого Codepen . Это оба грязные способы получить то, что вы хотите. Более правильный способ потребовал бы переработки того, как все это скомпоновано. Используйте контейнеры и держитесь подальше от поплавков. Вместо этого используйте flexbox. Делая это таким образом, на самом деле даже не требуется много сетки. Вот один из многих возможных способов исправить это Codepen. В будущем вы захотите держаться подальше от поплавков в целом. Flexbox и grid позволяют вам делать подобные вещи гораздо чище и стабильнее, а также предлагают большую гибкость. Удачи и не стесняйтесь следить, если что-то из этого смущает вас.

person TaterOfTots    schedule 24.01.2019
comment
Чувак, спасибо, что нашел время написать этот код. Сетка меня сильно смущает, но ваше объяснение ясно как вода. Меня поражает, насколько полезен CSS Grid! До того, как я узнал об этом, CSS казался таким сложным и просто непрактичным. Я собираюсь медленно, но неуклонно прекращать использовать поплавки, это просто боль в моих ягодицах! - person Jorge Gill; 24.01.2019
comment
без проблем, мой друг! Если вы хотите довольно мягкое введение в сетку, вот действительно хороший разговор. youtube.com/watch?v=txZq7Laz7_4&t=16s . Также ознакомьтесь с этой статьей о сетке css-tricks.com/snippets/css/ полная направляющая-сетка . и эта статья о flex css-tricks.com/snippets/css/ a-guide-to-flexbox - person TaterOfTots; 24.01.2019

arrow_upward
0
arrow_downward

Прямо сейчас ваш заголовок использует сетку, а остальная часть макета — нет.

Подобно тому, как вы установили display: grid; для элемента вокруг вашего заголовка, вы захотите создать некоторый элемент-контейнер вокруг вашего container-box div с display: grid; на нем.

Таким образом, элемент сетки (container-box) может использовать заданные вами свойства grid-column и grid-row. Просто не забудьте также установить значение для grid-row, прямо сейчас оно пусто.

person jordanmannfeld    schedule 24.01.2019
comment
Большое спасибо. Я так много раз возился с этим кодом, что не заметил, что моя сетка не находится в том же поле, что и contianer-box. Прости меня за это! Большое спасибо, что уделили время просмотру моего кода и помогли мне! - person Jorge Gill; 24.01.2019
comment
Без проблем! Рад, что помог! - person jordanmannfeld; 24.01.2019