Блог

Главная - Вопросы по программированию - вопросы компоновки flexbox и сетки

вопросы компоновки flexbox и сетки

#html #css #flexbox #css-grid

#HTML #css — код #гибкий ящик #css-сетка

Вопрос:

Я начал изучать html и css, и у меня большие проблемы с версткой, я попробовал grid и flexbox. Чего я хочу добиться, так это:

Какой макет я пытаюсь иметь введите описание изображения здесь

И, к сожалению, мой сайт выглядит так:

Моя планировка выглядит примерно так введите описание изображения здесь

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

     <!DOCTYPE html>

<html>
 <head>
  <meta charset="UTF-8"/>
  <meta name"viewport" content="width=device-width", initial-scale="1.0"/>
  <title>PE-ZONA.RO | WEBTOONS </title>
  <link rel="stylesheet" href="../css/styles.css"/>
  <link rel="stylesheet" href="../css/normalize.css"/>
 </head>

<body>
<!-- HEADER - ICONIȚE -->
<header>
 <div class="mhcon">
  <div class="mhconitem"><a href="#">PATREON</a></div>
  <div class="mhconitem2"><a href="#">DISCORD</a></div>
 </div>
</header>

<!-- SIDEBAR-NAVIGATIE -->
<aside>
   <nav>
     <div id="sidebar">
<ul>
 <li><a href="#">WEBTOONS</a></li>
 <li><a href="#">ECHIPĂ</a></li>
 <li><a href="#">ALĂTURĂ-TE</a></li>
 <li><a href="#">BLOG</a></li>
</ul>
  </div>
 </nav>
<aside>

<!-- WEBTOONS -->
<section>
 <div class="content">
  <div class="card">
    <h3>NUME WEBTOON1</h3> <br>
    <p>DESCRIERE WEBTOON
  </div>
  <div class="card">
    <h3>NUME WEBTOON2</h3> <br>
    <p>DESCRIERE WEBTOON
  </div>
  <div class="card">
    <h3>NUME WEBTOON3</h3> <br>
    <p>DESCRIERE WEBTOON
  </div>
 </div>
</section>

<!-- FOOTER -->
<footer>
 <div class="footercon">
  <p>Copyright @ pe-zona.ro</p>
 </div>
</footer>
</body>
</html>



   /* ARTICOLE */
.card {
  background-color: #c4c4;
  margin: 20px;
  padding: 20px;
  border: 6px solid #c5c5;
}


/* CONTAINER MENIU HEADER */
.mhcon {
  display: flex;
  flex-flow: row;
  justify-content: flex-end;
  border: 1px solid red;
  order: 1;
  flex: 1;
}

/* PATREON BUTTON */
.mhconitem {
  margin: 25px 15px;
  padding: 20px;
  width: 200px;
  text-align: center;
  background-color: #f07167;
  border-radius: 4px;
  border: none;
}

.mhconitem a {
  color: white;
  font-size: 2.5rem;
  font-weight: 700;
  text-decoration: none;
}


/* DISCORD BUTTON */
.mhconitem2 {
  margin: 25px 15px;
  padding: 20px;
  width: 200px;
  text-align: center;
  background-color: #6a4c93;
  border-radius: 4px;
  border: none;
}

.mhconitem2 a {
  color: white;
  font-size: 2.5rem;
  font-weight: 700;
  text-decoration: none;
}

/* CONTAINER SIDEBAR */
#sidebar {
 background-color: black;
 height: 100vh;
 width: 25vh;
 display: flex;
 flex: 1;
}

/* CONTAINER CONTENT */
.content {
  display: flex;
  justify-content: flex-end;
  flex: 2;
}

/* CONTAINER FOOTER */
.footercon {
  display: flex;
  justify-content: flex-end;
}

.footercon p {
  justify-content: center;
}

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

1. Я создал для вас макет сетки. Пожалуйста, побольше. И примите ответ, если это поможет, нажав на значки галочек в левой части моего ответа. Это поможет другим программистам с той же проблемой сетки.

Ответ №1:

Используя CSS-Grids , ваш макет готов 🙂

CSS-сетки предлагают большую гибкость для создания таких макетов, а не с помощью гибких блоков.

ССЫЛКА НА CODEPEN: https://codepen.io/emmeiWhite/pen/abmEBgP

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style-type: none;
}
a {
  text-decoration: none;
}
body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(8, 1fr);
  height: 90vh;
  width: 90vw;
  margin: 1rem auto;
  gap: 1rem;

  grid-template-areas:
    "aside section section section"
    "aside section section section"
    "aside section section section"
    "aside section section section"
    "aside section section section"
    "aside section section section"
    "aside footer footer footer"
    "aside footer footer footer";
}

aside,
header,
footer,
section {
  border: 1px solid #ccc;
}
aside {
  grid-area: aside;
}

section {
  grid-area: section;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6, 1fr);
  padding: 2rem;

  grid-template-areas:
    " header header header"
    "content content content"
    "content content content"
    "content content content"
    "content content content"
    "content content content";
}

header {
  grid-area: header;
  border: none;
}

header .mhcon {
  display: flex;
  justify-content: flex-end;
}

header .mhcon div {
  border: 1px solid #ccc;
  padding: 0.5rem 1rem;
}

header .mhcon div:last-child {
  margin-left: 1rem;
}
.content {
  display: grid;
  grid-area: content;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 2rem;
  row-gap: 1rem;
}

.card {
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

footer {
  grid-area: footer;
} 
 <!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name"viewport" content="width=device-width", initial-scale="1.0"/>
    <title>PE-ZONA.RO | WEBTOONS</title>
    <link rel="stylesheet" href="./style.css" />
  </head>

  <body>
    <!-- SIDEBAR-NAVIGATIE -->
    <aside>
      <nav>
        <div id="sidebar">
          <ul>
            <li><a href="#">WEBTOONS</a></li>
            <li><a href="#">ECHIPĂ</a></li>
            <li><a href="#">ALĂTURĂ-TE</a></li>
            <li><a href="#">BLOG</a></li>
          </ul>
        </div>
      </nav>
    </aside>

    <!-- WEBTOONS -->
    <section>
      <!-- HEADER - ICONIȚE -->
      <header>
        <div class="mhcon">
          <div class="mhconitem"><a href="#">PATREON</a></div>
          <div class="mhconitem2"><a href="#">DISCORD</a></div>
        </div>
      </header>
      <div class="content">
        <div class="card">
          <h3>NUME WEBTOON1</h3>
          <br />
          <p>DESCRIERE WEBTOON</p>
        </div>

        <div class="card">
          <h3>NUME WEBTOON2</h3>
          <br />
          <p>DESCRIERE WEBTOON</p>
        </div>

        <div class="card">
          <h3>NUME WEBTOON3</h3>
          <br />
          <p>DESCRIERE WEBTOON</p>
        </div>

        <div class="card">
          <h3>NUME WEBTOON1</h3>
          <br />
          <p>DESCRIERE WEBTOON</p>
        </div>

        <div class="card">
          <h3>NUME WEBTOON2</h3>
          <br />
          <p>DESCRIERE WEBTOON</p>
        </div>

        <div class="card">
          <h3>NUME WEBTOON3</h3>
          <br />
          <p>DESCRIERE WEBTOON</p>
        </div>
      </div>
    </section>

    <!-- FOOTER -->
    <footer>
      <div class="footercon">
        <p>Copyright @ pe-zona.ro</p>
      </div>
    </footer>
  </body>
</html>