How can I use Grid/Flex to make these these side by side?

6 Replies

RMONOP•12mo ago

How can I make Skills colum and Hello! colum side by side with a gap in between?

   <div class="Grid-row--4">
        <div class="DescAboutMe">
          <h2 class="TextStylingAboutMe">Hello!</h2>
          <h3 class="DescAboutMeText">My name is Arman Markaryan and I'm a passionate Front-End Developer I enjoy using technology to build all sorts of products and designs I enjoy solving different types of problems using the power of technology.</h3>
          <h3 class="Oppertunity">I would love to hear from you, Whether it is a job oppertunity or to just chat. Feel free to contact me.</h3>
          <h2 class="TextStylingAboutMe">Skills</h2>
          <button class="HTMLDesign">HTML</button>
          <button class="CSSDesign">CSS</button>
        </div>

   <div class="Grid-row--4">
        <div class="DescAboutMe">
          <h2 class="TextStylingAboutMe">Hello!</h2>
          <h3 class="DescAboutMeText">My name is Arman Markaryan and I'm a passionate Front-End Developer I enjoy using technology to build all sorts of products and designs I enjoy solving different types of problems using the power of technology.</h3>
          <h3 class="Oppertunity">I would love to hear from you, Whether it is a job oppertunity or to just chat. Feel free to contact me.</h3>
          <h2 class="TextStylingAboutMe">Skills</h2>
          <button class="HTMLDesign">HTML</button>
          <button class="CSSDesign">CSS</button>
        </div>

clevermissfox•12mo ago

Use grid with grid-template-cols : 1fr 1fr or flex on the parent Grid-row--4 And add a gap

RMONOP•12mo ago

I actually had solved the problem, I used a

display: flex;
  justify-content: space-evenly;

display: flex;
  justify-content: space-evenly;

on the div housing the two things and it worked fine Would that be fine or not the right way to go about it even though it does the job ? The difference I'd understand between my way and yours is that yours might be less limited so I can have a gap and bring them closer or further while mine just spaces the two evenly current section looks like this

RMONOP•12mo ago

Ignore the fact there's literally two Skills (It's depressing)

clevermissfox•12mo ago

There is no difference except for the spacing. Using space-bw, space-evenly or space-around justifies it within its container. You'll always want at least a 1em gap even when using the spacing properties so they can never run into each other as the screen gets smaller. You asked how to get them side by side with a gap in bw, not how to get them side by side with the available space in between them. Was answering your question as it was asked. You wouldn't want to use gap to create more than a few rems of space bw or it won't be responsive; it will always keep that gap there. Space how ever you see fit. That's what the justify-content properties are there for. And if you don't want them to stretch, you'll need an align-items property .

Gaming

Programming

How can I use Grid/Flex to make these these side by side?