Я вложил сетки в CSS, и строки не будут реагировать на второй контейнер, как они делают в первом контейнере - PullRequest
Новая
       48

Я вложил сетки в CSS, и строки не будут реагировать на второй контейнер, как они делают в первом контейнере

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

В этом примере у меня есть контейнер (.about_wrapper_master), который использует flexbox для переноса каждого экрана (#welcome и .beginnings), который настроен на заполнение области просмотра шириной 100vw и 100vh. Контейнер (.about_wrapper_master) установлен на высоте 200vh, чтобы позволить обоим экранам с 100vh складываться друг на друга. Для каждого вложенного контейнера, отражающего размер области просмотра, я использую display: grid. Я могу точно установить строки для первого контейнера (#welcome), но не могу установить его для (.beginnings). Когда я устанавливаю любой абзац (# beg1 / # beg2) для запуска во второй строке, он полностью выталкивает его из контейнера. Почему это так?

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

  • Это для сайта с портфелем, и вот вам вырезанный код из моего репозитория github, специально ссылающийся на страницу about моего портфолио. Если это не имеет смысла или является неполным, а все остальное терпит неудачу, это ссылка на мой снимок ветки репозитория github по этой проблеме. https://github.com/stvikkra/STVIKKRA/tree/solve_rows Этот код можно найти в формате. html и стиле. css

CSS 


body {
 box-sizing: border-box;
}

/* unvisited link */
a:link {
  color: #FF537C;
}

/* visited link */
a:visited {
  color: #FF537C;
}

/* mouse over link */
a:hover {
  color: #C4C4C4;
}

/* selected link */
a:active {
  color: #C4C4C4;
}

a:link {
  text-decoration: none;
}

h1 {
  font-family: 'Oswald', sans-serif;
  font-size: 61.04px;
  color: white;
}


h4 {
  font-family: 'Oswald', sans-serif;
  font-size: 25px;
  padding-left: 20%;
  margin-right: 10%;
  line-height: 200%;
  color: white;
}

h2{
  font-family: 'Oswald', sans-serif;
  font-size: 48.83px;
}

h3{
  font-family: 'Oswald', sans-serif;
  font-size: 31.25px;
  padding-left: 20%;
  margin-right: 10%;
  color: #FF537C;
}

h6{
  font-family: 'Prompt', sans-serif;
  font-style: italic;
  font-size: 12.8px;
  line-height: 150%;
}

p {
  font-family: 'Prompt', sans-serif;
  font-size: 16px;
  line-height: 200%;
}

.description_display {
  font-family: 'Prompt', sans-serif;
  font-size: 20px;
  line-height: 150%;
  margin: 0;
  padding-top: 5%;
  padding-left: 0;
}

/* About */

.about_wrapper_master {
  background-color: white;
  width: 100vw;
  height: 200vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}


#welcome {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
}

.blackandwhite {
  max-width: 100%;
  height: 100%;
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 5;
  grid-row-end: 12;
  align-self: flex-end;
}

#mynameis{
  color: #6D7178;
  line-height: 200%;
  grid-column-start: 4;
  grid-column-end: 8;
  grid-row-start: 5;
  padding-left: 10%;
  margin: 0;
}

#channel{
  color: #6D7178;
  line-height: 200%;
  grid-column-start: 9;
  grid-column-end: 12;
  grid-row-start: 5;
  margin: 0;
  padding: 0;

}

#intro_about{
  color: #6D7178;
  grid-column-start: 4;
  grid-column-end: 8;
  grid-row-start: 7;
  padding-left: 10%;
  line-height: 200%;
}

#contact_me{
  color: #6D7178;
  grid-column-start: 4;
  grid-column-end: 8;
  grid-row-start: 9;
  padding-left: 10%;
  line-height: 200%;
}


#hobbies{
  color: #6D7178;
  grid-column-start: 9;
  grid-column-end: 12;
  grid-row-start: 7;
  line-height: 200%;
}

.contacticons{
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 10;
  grid-row-end: 12;
  margin-left: 20%;
  align-self: flex-end;
  display: flex;
  justify-content: space-between;
}

.musicicons{
  grid-column-start: 9;
  grid-column-end: 11;
  grid-row-start: 8;
  grid-row-end: 10;
  margin-bottom: 10%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

#soundcloud{
  width: 62.33px;
  height: 60.18px;
}

#bandcamp{
  width: 66px;
  height: 60.18px;
}

#evenmore{
  color: #FF537C;
  grid-column-start: 9;
  grid-column-end: 12;
  grid-row-start: 11;
  grid-row-end: 12;
  padding-left: 15%;
  align-self: flex-end;
}

#more{
  grid-column-start: 9;
  grid-column-end: 11;
  grid-row-start: 11;
  grid-row-end: 12;
  align-self: center;
  padding: 0;
  width: 35px;
  height: 35px;
}

.beginnings {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  border: 10px solid green;
}

#beg1{
  grid-column-start: 2;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 6;
}

#beg2{
  grid-column: 2 / 6;
  grid-row: 2 / 6;
}

.elysium_contain{
  grid-column: 8 / 12;
  grid-row: 1 / 2;
  border: 10px solid blue;
}

HTML 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="reset.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Prompt&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
    <title>STVI KKRA | About Me</title>
  </head>
  <body>

    <div class="about_wrapper_master">
      <nav class="navigation">
        <h3 id="header_name"> STVI KKRA </h2>
        <h4 id="case_studies_nav">Case Studies</h3>
      </nav>

      <div id="welcome">
        <img src="images/cartoon.png" alt="B&W" class="blackandwhite"/>
        <h4 id="mynameis">My name is Stevie Kukura <br /> I am ...</h3>
        <p id="intro_about">24 years old, queer, and vegan. I currently reside in Knoxville, TN but I am looking to re-locate to California in the next couple of years. </p>
        <p id="contact_me"> Shoot me an email at stvikkra@gmail.com or add me on social media!</p>

        <div class="contacticons">
          <img src="images/gmail_black.png" alt="send email"/>
          <img src="images/linkedin_black.png" alt="linkedin"/>
          <img src="images/github_black.png" alt="github"/>
        </div>

        <h4 id="channel">I channel my creative passion in other ways than just design // </h4>
        <p id="hobbies">My hobbies include making music, photography, and travelling / exploring.</p>

        <div class="musicicons">
        <img src="images/bandcamp.png" alt="bandcamp" id="bandcamp"/>
        <img src="images/soundcloud.png" alt="soundcloud" id="soundcloud"/>
        </div>

        <img src="images/downarrow_black.png" alt="more" id="more" />
        <h4 id="evenmore">Even more about me</h4>
      </div>

      <div class="beginnings">
        <p id="beg1">
          I saw my first bit of code when I was fourteen and modifying my emo band’s myspace page. The moment I realized that my high school offered web design classes, I signed up immediately. These classes introduced me to HTML/CSS from a young age. I graduated high school in 2014, so I began learning how to code when HTML5 was in its early stages, and using Adobe Dreamweaver was common practice. I loved it so much that I took additional technology and business classes my school offered, one of which was called Virtual Enterprise. </p>

      <p id="beg2">
          This specific class functioned as a corporate company with different positions, such as CEO, CFO, Accounting and Marketing. With my web design experience, I held the web/graphic designer position. We were all able to compete with other classes that took Virtual Enterprise across the country and it was such a fun and interactive experience. I have always had a knack for technology and felt very artistic so my teachers all urged me to go down this path. </p>

        <div class="elysium_contain">
        <img src="images/elysium.png" alt="Elysium" id="elysium"/>
        <h6>“Elysium” was a fictional tech company with futuristic products. I designed this logo and the website for my Virtual Enterprise class in high school.</h6>
      </div>
      </div>

    </div>

  </body>
  </html>

В любом случае, я озадачен, почему он работает в первой сетке, а не во второй, и я просто хочу знать причину, по которой я не могу использовать fr для строк.

...