网格 - 使文本粘在左侧时出现问题

Question

我正在尝试制作一个响应式网页，我需要在大屏幕上将图像固定在右侧，将文本固定在左侧，然后使图像在小屏幕上位于文本上方。我尝试使用 css 网格并且它适用于图像，但由于某种原因，文本没有从网格的最左侧部分开始。

看起来像这样：

我在下面包含了我的代码的相关部分。

    container {
        margin-left: auto;
        margin-right: auto;
        /*padding-left: 15px;
        padding-right: 15px;*/
    }

    .row {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 20px;
        background-color: powderblue;
    }

    .col-lg-right-4 {
        grid-column: col-start 9 / span 4
    }

    .col-lg-left-6 {
        grid-column: col-start / span 6;
        grid-row: 1;
    }

    .col-md-right-4 {
        grid-column: col-start 9 / span 4
    }

    .col-md-left-6 {
        grid-column: col-start / span 6;
        grid-row: 1;
    }

    .col-xs-12 {
        grid-column: span 12;
    }

    <div class="container">
        <div class="row">
            <div class="col-lg-right-4 col-md-right-4 col-xs-12">
                <img src="assets/svg/asset-board_one-planet.svg" id="one-planet" />
            </div>
            <div class="col-lg-left-6 col-md-left-6 col-xs-12">
                <h3><b>WHAT</b> is This Title</h3>
                <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec neque et ipsum cursus aliquet. Ut tristique quis tortor eu consectetur. Nunc semper in neque egestas hendrerit. Aliquam congue ex id ex suscipit viverra. Ut pulvinar erat eu turpis eleifend imperdiet. Integer sodales id eros et fermentum. Ut iaculis neque sapien, id mollis ligula pretium ultricies.
                        Nunc a convallis lectus. Quisque elementum neque non ligula semper lobortis. Nulla nec turpis dictum, tincidunt massa sit amet, viverra erat. Quisque sit amet pretium orci. Duis egestas odio ac nisi mattis blandit. Etiam maximus quam sollicitudin, aliquam nisl at, convallis lacus. Nam eget suscipit ligula. Aliquam quis mi a odio posuere hendrerit. Curabitur et posuere nibh.</p>
            </div>

            
        </div>
    </div>

Answer 1

试试这个：

.wrapper {
  display: grid;
  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
}

.box1 {
    grid-column-start: main-start;
    grid-row-start: main-start;
    grid-row-end: main-end;
 }

.box2 {
  grid-column-start: content-end;
  grid-row-start: main-start;
  grid-row-end: content-end;
}

.box3 {
  grid-column-start: content-start;
  grid-row-start: main-start;
}

.box4 {
  grid-column-start: content-start;
  grid-column-end: main-end;
  grid-row-start: content-end;
}

<div class="wrapper">
       
            <div class="box1">
                <img src="https://image.freepik.com/free-vector/globe-icon_23-2147508246.jpg" width="200" height="200" id="one-planet" />
            </div>
            <div class="box3">
                <h3><b>WHAT</b> is This Title</h3>
                <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec neque et ipsum cursus aliquet. Ut tristique quis tortor eu consectetur. Nunc semper in neque egestas hendrerit. Aliquam congue ex id ex suscipit viverra. Ut pulvinar erat eu turpis eleifend imperdiet. Integer sodales id eros et fermentum. Ut iaculis neque sapien, id mollis ligula pretium ultricies.
                        Nunc a convallis lectus. Quisque elementum neque non ligula semper lobortis. Nulla nec turpis dictum, tincidunt massa sit amet, viverra erat. Quisque sit amet pretium orci. Duis egestas odio ac nisi mattis blandit. Etiam maximus quam sollicitudin, aliquam nisl at, convallis lacus. Nam eget suscipit ligula. Aliquam quis mi a odio posuere hendrerit. Curabitur et posuere nibh.</p>
            </div>

            
        </div>

网格 - 使文本粘在左侧时出现问题

grid - Trouble with making text stick to the left

html

css

css-grid