Блог

Главная - Вопросы по программированию - Попытка получить правильное расположение сетки CSS

Попытка получить правильное расположение сетки CSS

#css #grid-layout

#css #grid-layout

Вопрос:

Я разрабатываю свой собственный веб-сайт, используя HTML и CSS. Я решил использовать сетку следующим образом:

 /* Style the grid container */

.item1 {
  grid-area: logo;
}

.item2 {
  grid-area: cta;
}

.item3 {
  grid-area: menu;
}

.item4 {
  grid-area: spacer;
}

.item5 {
  grid-area: left;
}

.item6 {
  grid-area: right;
}

.grid-container {
  display: grid;
  grid-template-areas: 'logo cta cta' 'menu menu menu' 'spacer  spacer spacer' 'left right right';
  grid-gap: 10px;
  padding: 10px;
}

.grid-container>div {
  border: 1px solid rgba(0, 0, 0, 0.8);
}

.item1 img {
  min-width: 200px;
}


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

@media (max-width: 600px) {
  .grid-container {
    grid-template-areas: 'logo' 'cta' 'menu' 'spacer' 'left' 'right';
  }
} 
 <div class="grid-container">
  <div class="item1">
    <img src="Images/DN signatur    es/dn_gold.png" style="width:25%" alt="" />
  </div>
  <div class="item2">
    <p>dermot at dermotnolan dot ie</p>
  </div>
  <div class="item3">
    <div class="topnav" id="myTopnav">
      <a class="mnu active" href="#home">Home</a>
      <a class="mnu" href="#about">About me</a>
      <a class="mnu" href="#gallery">Gallery</a>
      <a class="mnu" href="#imw">IMW</a>
      <a class="mnu" href="#blog">Blog</a>
      <a class="icon" href="javascript:void(0);" style="font-size:18px;" onclick="myFunction()">amp;#9776;</a>
    </div>
  </div>
  <div class="item4">
    <br/>
  </div>
  <div class="item5">
    <h2>Column 1 in Myriad</h2>
    <h5>A heading in Consolas</h5>
  </div>
  <div class="item6">
    <h2>Column 1 in Myriad</h2>
    <h5>A heading in Consolas</h5>
    <h2>Column 1 in Myriad</h2>
    <h5>A heading in Consolas</h5>
    <h2>Column 1 in Myriad</h2>
    <h5>A heading in Consolas</h5>
  </div>

</div>

Моя проблема в том, что это выглядит так:

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

Где я ожидаю, что самые левые элементы (логотип, слева) будут шириной в один столбец…

Я уверен, что мне не хватает чего-то простого, если кто-нибудь может внести предложения, я был бы благодарен.

Заранее спасибо,

Дермот

Комментарии:

1. «… Я ожидаю, что самые левые элементы (логотип, слева) будут шириной в один столбец». Что именно вы имеете в виду? Можете ли вы поделиться изображением того, что вам нужно?

Ответ №1:

Я думаю, вы забыли вызвать свой CSS-файл в HTML-документе. вам нужно будет вызвать ваш CSS-файл в заголовке вашего HTML-файла, как в примере ниже:

 <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link  type="text/css" rel="stylesheet"  href="/css/styles.css">
<title></title>
</head>

I have attached a picture of my output.[screenshot of the picture][1]
[1]: https://i.stack.imgur.com/8LxGK.png

Ответ №2:

На самом деле я ссылался на свой CSS — то, что вы видите выше, — это просто выдержка из кода.

Тем не менее, мне удалось найти хорошее решение, которое отлично работает:

 =================================================
grid elemnent styling copied from 
https://css-tricks.com/simple-named-grid-areas/#top-of-site
as well as W3Schools
=================================================
*/ 

/*HEADER area */
.gridheader {
  display: grid;
  grid-gap: 10px;
  padding: 10px;
  grid-template-columns: 300px 1fr  1fr;
  grid-template-areas: 
    'logo logo cta'
    'menu menu menu'
    'spacer spacer spacer';
}
/*MAIN area */
.gridcolumns {
  display: grid;
  grid-gap: 10px;
  padding: 10px;
  grid-template-columns: 1fr 1fr  1fr;
  grid-template-areas: 'left right right';
}