Блог

Главная - Вопросы по программированию - Макет сетки CSS не может заставить макет вести себя так, как я хочу, что бы я ни делал

Макет сетки CSS не может заставить макет вести себя так, как я хочу, что бы я ни делал

#html #css #grid #grid-layout

#HTML #css #сетка #grid-layout

Вопрос:

Эй, ребята, итак, я пытаюсь выполнить это задание, и одним из требований является то, что он использует макет сетки в CSS, поэтому я собрал только начало страницы, пытаясь заставить макет работать так, как я хочу, и, хоть убей, я не могу заставить эту страницу работать так, как я хочу.ведите себя так, как мне нужно, и это загоняет меня в тупик, что я не могу понять, что я делаю не так или чего не хватает в этом. Я просмотрел так много руководств и сайтов о том, как использовать grid, и я просто не уверен, чего мне не хватает. Любая помощь действительно ценится вот мой код. Отредактируйте макет, к которому я стремлюсь, примерно так.введите описание изображения здесь

HTML

 <head>
<meta charset="UTF-8">
<title>Assignment 3</title>
<meta name="description" content="This is the assignment 3 web page showcasing what we have learned in COMP1223 the so far.">
<meta name="keywords" content="Assignment 3, HTML5, CSS, flexbox, grid, form, image mapping, position fixed, nav">
<meta name="author" content="Jessica">
<link href="grid.css" rel="stylesheet">
<link href="normalize.css" rel="stylesheet">
</head>

<body>


<div class="grid-container">
    <div class="grid-item">
        <aside class="hobbies">1</aside>
    </div>
    <div class="grid-item">
        <header class="intro">2</header>
    </div>
    <div class="grid-item">
        <section class="application">3</section>
    </div>
    <div class="grid-item">
        <section class="form_elements">4</section>
    </div>
    <div class="grid-item">
        <article class="tutorial">5</article>
    </div>
    <div class="grid-item">
        <footer class="image_mapping">6</footer>
    </div>
</div>

</body>

</html>

CSS

 .grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: repeat(5 auto);
    background-color: #2196F3;
    padding: 10px;
    grid-template-areas: "hb int int" "hb app fe" "hb app fe" "tu tu tu" "im im im";
}

.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

.hobbies {
    grid-area: hb;
}

.intro {
    grid-area: int;
}

.application {
    grid-area: app;
}

.form_elements {
    grid-area: fe;
}

.tutorial {
    grid-area: tu;
}

.image_mapping {
    grid-area: im;
}

Ответ №1:

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

Один совет, если вы собираетесь использовать «в сторону» и прочее, вам не следует помещать их в div, потому что div и aside делают то же самое, они группируют содержимое.

Я оставлю, как я бы сделал это назначение, так что, возможно, это поможет вам в будущем:

 .grid-container {
  display: grid;
  grid-template-areas:
    "hb int int"
    "hb ma ma"
    "ar ar ar"
    "im im im";
  /*I give the rows and columns a size just for comfort, but you can use '1fr'*/
  grid-template-rows: repeat(5, 100px);
  grid-template-columns: repeat(3, 100px);
  background-color: #2196F3;
  padding: 10px;
}

.grid-item,  .grid-main-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 15px;
  font-size: 30px;
  text-align: center;
}

/*I use id's to be more specific in wich thing i want to assign wich grid-area*/

#hobbies {
  grid-area: hb;
}

#intro {
  grid-area: int;
}

#tutorial {
  grid-area: ar;
}

#image_mapping {
  grid-area: im;
}


/* main container to have that 2 section's inside another block*/
#main-container {
  grid-area: ma;
  display: grid;
  grid-template-areas:
    "app frm"
    "app frm";
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
    /*you can put padding: 0; so the main container is invisible*/
}

#application {
  grid-area: app;
}

#form_elements {
  grid-area: frm;
} 
 <div class="grid-container">

    <header class="grid-item" id="intro">2</header>

    <aside class="grid-item" id="hobbies">1</aside>

  <main class="grid-item" id="main-container">
    <section class="grid-main-item" id="application">3</section>

    <section class="grid-main-item" id="form_elements">4</section>

</main>
    <article class="grid-item" id="tutorial">5</article>
  

    <footer class="grid-item" id="image_mapping">6</footer>

</div>

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

1. хорошо, большое спасибо за помощь, а также за совет новичку в html и css и кодировании в целом, так что все еще изучаю все это, еще раз спасибо. 🙂

2. добро пожаловать :), там я только что оставил способ сделать это с некоторыми комментариями…

3. еще один вопрос к вам, поскольку вы, похоже, очень хорошо осведомлены в этой теме. Если бы я хотел поместить навигационное меню в верхнюю часть фиксированной позиции страницы, хотел бы я разместить его внутри контейнера сетки или за его пределами?

4. обычно навигация используется внутри заголовка, потому что заголовок и навигация обычно находятся вверху страницы. Что вы можете сделать, это поместить этот заголовок / навигацию за пределы контейнера сетки, оформить его так, чтобы он был зафиксирован в верхней части страницы, и оформить контейнер сетки с некоторым margin-top: {«высота навигации»;}

Ответ №2:

Вот еще одна реализация, возможно, более понятная

 <!DOCTYPE html>
<html lang="en">
<head>
    <style>

        * {
            padding: 40px;
        }
        body {
            background-color: rgb(61, 61, 61);
        }
        .container{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 10px;
        }

        .container > div {
            border-style: solid;
        }

        .aside {
            grid-row: 1 / 3;
        }

        .header {
            grid-column: 2 / 4
        }

        .article, .section {
            grid-column: 1 / 4;
        }
    </style>


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="aside">aside</div>
        <div class="header">header</div>
        <div>section</div>
        <div>section</div>
        <div class="article">article </div>
        <div class="section">section</div>
    </div>
</body>
</html>

Посмотрите демонстрацию: https://codepen.io/anthony_718/pen/dyppJwd

Ресурс для понимания CSS Grid: https://scotch.io/tutorials/getting-started-with-css-grid-layout