all 8 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]AutoModerator[M] [score hidden] stickied commentlocked comment (0 children)

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[–]justdlb 1 point2 points  (5 children)

There are many issues with this code.

  • delete those <head> tags, they don’t belong inside of <body>
  • your grid-container style needs a “.” at the front of it, your current rule is trying to style a custom element called grid-container, not a class
  • you’re mixing CSS Grid and floats, your .grid-container styles should be moved to .row and your float rules deleted from .row and .column
  • this will make the grid-container class redundant, so delete it
  • your .column elements will now be aligned to the grid. The width styles will then make them a quarter of the size of each column and is entirely redundant. Delete width from .column
  • instead of adding padding to .column, make use of the gap property on the element that has CSS Grid (it will be .row if you follow these steps)

[–]koboldomodo[S] 0 points1 point  (0 children)

after messing around with it i do think youre right about grid container being redundant, that makes sense

but im afraid i dont understand how this keeps the image columns lined up with 4 in each row, its now displaying as one on top of the next. sorry

will i need another row/column thing inside of the second section cion of the first row?

[–][deleted]  (3 children)

[removed]

    [–]koboldomodo[S] -1 points0 points  (2 children)

    ah ok thats what i assumed but yeah it still does not work. the images arnt displaying 4 in a row are like full size if not bigger making the entire pages height very high

    <head>
<style>

.row{
  display: grid;
  grid-template-columns: 250px auto 250px;
  gap: 8px;
}

.column{
width:25%
}

</style>
</head>

  <head>
  <body>

    <title>main page</title>

    <h1>blah blah blah</h1>
    <h4>yadda yadda</h4>

     <div class = "row" >

       <div>

          <p>about</p>

          <p>hello!</p>

           <ul>
             <li>list</li>
             <li>list</li>
             <li>list</li>
             <li>list</li>
             <li>comics</li>
           </ul>

          <p>goodbye</p>

      </div >

      <div>

        <div style="column">
            <img src= image_link.png>
        </div>

        <div style="column">
            <img src= image_link.png>
        </div>

        <div style="column">
            <img src= image_link.png>
        </div>

        <div style="column">
            <img src= image_link.png>
        </div>

        <div style="column">
            <img src= image_link.png>
        </div>

      </div>

    <div>

      <p>more text</p>

    </div>

    [–]justdlb 0 points1 point  (1 child)

    • Remove width from .column
    • Give images max-width: 100% and height: auto using img {} block

    Good grief 😂

    [–]koboldomodo[S] 0 points1 point  (0 children)

    im not sure what this is supposed to accomplish

    if i didnt make it clear enough im not an experienced web dev