Текст в сетке перекрывается

2-й день работаю над своим сайтом. Пока все выглядит нормально, но когда я изменяю размер сайта (с помощью прокрутки мыши), текстовые абзацы в разных элементах перекрывают друг друга. Выглядит не очень красиво, что делать? Кроме того, правильно ли я сделал, поместив три первых абзаца как одну сетку, а два последних - как вторую сетку? Я хотел, чтобы четвертый абзац был на ширине первых двух столбцов. Есть ли более простой способ очистить код?

body {
    background-color: #ffffff;
    margin: 0px;
    display: grid;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 20px;
    padding-bottom: 40px;
    overflow: hidden;
    background-color: #e6e6e6;
    text-align: right;
    color: #dfbf9f;
}

li {
    display: inline-block;
}

    li a {
        display: block;
        color: #999999;
        text-align: center;
        padding: 14px 30px;
        text-decoration: none;
        font-weight: bold;
        font-size: 1em;
    }

        li a:hover {
            border-radius: 10px;
            background-color: #d9d9d9;
        }

        li a:visited {
            background-color: #d9d9d9 !important;
        }

.welcome {
    background: linear-gradient(to bottom, #01aef0 45%, #0090d7 100%);
    padding: 50px;
    margin: 0px;
    padding-top: 20px;
}

h1 {
    color: #ffffff;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    font-size: 5em;
    -webkit-margin-start: 15px;
    -webkit-margin-end: 15px;
    font-family: 'Crimson Text', serif;
    letter-spacing: 5px;
}

h2 {
    margin: 0;
    color: #000000;
    font-style: italic;
    font-size: 2em;
    font-family: 'Ramajana', serif;
}

#lorem {
    color: #80dfff !important;
    -webkit-margin-start: 15px;
    -webkit-margin-end: 15px;
    -webkit-margin-before: -15px;
    -webkit-margin-after: 10px;
    font-family: 'Crimson Text', serif;
    font-weight:300;
}

.grid {
    display: grid;
    height: 300px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-row-gap: 50px;
    grid-column-gap: 20px;
    padding: 0px;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 75px;
    font-family: 'Ramajana', serif;
}

.description {
    font-size: 18px;
    color: #808080;
}

#title {
    font-size: 3em;
    font-weight: 600;
    font-family: 'Ramajana', serif;
}

.ostatnie {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 20px;
    grid-column-gap: 40px;
    padding: 0px;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 30px;
    }


footer {
    background-color: #e6e6e6;
    text-align: left;
    padding: 10px;
    padding-left: 40px;
    margin-bottom: 20px;
    display: inline-block;
    word-spacing: 50px;
    width: 100%;
    height: 50%;
}

ol {
    padding-left: 10px;
    }
<!DOCTYPE html>
<html>
<head>
        <link href="style.css" type="text/css" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css?family=Crimson+Text:600,600i,700,700i" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Ramaraja" rel="stylesheet">
        <title>Welcome</title>
</head>

<body>

<div class="topnav">
    <ul>
        <li><em><a href="#home" style="text-decoration:none">Home</a></em></li>
        <li><em><a href="#aboutus" style="text-decoration:none">About Us</a></em></li>
        <li><em><a href="#services" style="text-decoration:none">Services</a></em></li>
        <li><em><a href="#solutions" style="text-decoration:none">Solutions</a></em></li>
        <li><em><a href="#support" style="text-decoration:none">Support</a></em></li>
        <li><em><a href="#partners" style="text-decoration:none">Partners</a></em></li>
        <li><em><a href="#contact" style="text-decoration:none">Contact</a></em></li>
     </ul>
</div>
	
	<div class="welcome">
		<header>
            <h1><em>welcome</em></h1>
			<h2 id="lorem">Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h2>
        </header>
    </div>


<div class="grid">
	<div id="t1">
	<h2 id="title"><em>Who Are We?</em></h2>
		<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting <a href="https://templated.co/">Website CSS Templates</a>, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
	</div>
	
	<div id="t2">
	<h2 id="title"><em>What We Do?</em></h2>
	<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
	</div>
	
	<div id="t3">
	<h2 id="title"><em>Latest Projects</em></h2>
	<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting <a href="https://templated.co/">Website CSS Templates</a>, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
	</div>
</div>

<div class="ostatnie">
	<div id="t4">
	<h2 id="title"><em>Some Title</em></h2>
	<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged <a href="https://templated.co/">Website CSS Templates</a>. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
	</div>

	<div id="t5">
	<h2 id="title"><em>Some Title</em></h2>
	<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown <a href="https://templated.co/">Website CSS Templates</a> printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typeset</p>
	</div>
</div>

<footer>
    <ol>
        <li>home</li>
        <li>about us</li>
        <li>services</li>
        <li>solutions</li>
        <li>support</li>
        <li>partners</li>
        <li>contact</li>
    </ol>
</footer>

</body>

Глупый вопрос, а почему ты все подчеркиваешь?

Mr Lister 11.04.2018 13:46

Что ты имеешь в виду? Например, почему я помещаю каждое описание в class = description? Я новичок в программировании, поэтому не совсем уверен, нужно это или нет.

DoktorAgon 11.04.2018 13:51

Нет, я имел в виду, что вы поместили так много вещей в теги <em> .. </em>.

Mr Lister 11.04.2018 15:23

Это для стиля, думаю, я мог бы сделать это по-другому.

DoktorAgon 12.04.2018 10:39
0
4
362
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Возможно, вы захотите удалить эти 2 строки из вашего css-кода .grid, чтобы получить желаемый результат.

height: 300px;
grid-template-rows: 1fr 1fr 1fr;

Ваш новый CSS должен быть примерно таким

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-row-gap: 50px;
    grid-column-gap: 20px;
    padding: 0px;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 75px;
    font-family: 'Ramajana', serif;
}

Спасибо, полностью сработало! Кроме того, могу ли я сгруппировать все 5 абзацев в одну сетку и по-прежнему иметь тот же эффект?

DoktorAgon 11.04.2018 13:49

Другие вопросы по теме