Drawing a custom card using flex

user_4428059 0
Viewed 50

could someone help me on this, thanks

I'm trying to create the layout identical to figure 2, but I'm not able to ... How could i do a layout like the figure 2 using flex.

I create a board using flex but the items are not placed in correct way, and i'm struggling to add a second line.

So far what I've managed to do is the following,

.collection-card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-grow: 5;
    flex-shrink: 5;
    min-width: 50em;
    max-width: 50em;
    margin: 15px !important;
}


.grid-row-container {
    display: grid;
    grid-template-rows: auto auto;
}

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    // padding: 10px;
}
.grid-item {
    //background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    // padding-left: 5px;
    // padding-right: 5px;
    // font-size: 30px;
    text-align: center;
}

.my-row {
  display: flex;
}

.my-column {
  flex: 50%;
}


<Card className='collection-card' interactive={true} onClick={() => history.push(getPath())}>
        {/* my-row */}

        <div className='tx-inverse tx-bold collection-title'>{name}</div>
        

        <div className='grid-row-container '>
            <div className='grid-container'>
                <div className='grid-item'>ykykysdfsdfsdafsdfasdfsdf k</div>
                <div className='grid-item'>aaaaaa k</div>
                <div className='grid-item'>
                    <div className='collection-card-buttons '>
                        <button
                            type='button'
                            className='btn btn-primary icon-button field-inline card-forcewidth'
                            onClick={() => {
                                //setEntityModalOpen(true);
                                // history.push(`/objects/object-templates/${id}` + window.location.search);
                            }}
                        >
                            view 
                        </button>
                    </div>
                </div>
            </div>

            <div className='grid-container'>
                <div className='grid-item'>aaaaaa k</div>
                <div className='grid-item'>aaaaaa k</div>
            </div>
        </div>
    </Card>

and ends up like this:

figure 1

but what i need is the items placed like this,

figure 2

flexbox reactjs sass css html
1 Answers

In order to share the potential solution, I had to re-write the code to work with plain HTML/CSS. There is no right way to solve the layout issue but I have used flexbox and aligned the elements accordingly to achieve the desired layout. With this example, you should be able to recycle the CSS and add it to your specific project to work. Run the code snippet below and hope it helps!

p {
  margin: 0;
  padding: 0;
  display: inline;
}

.user-container {
  max-width: 750px;
  border: 1px solid #545454;
  border-radius: 15px;
  margin: 0 auto;
  padding: 2rem;
  font-family: Arial, Helvetica, sans-serif;
}

.user-title {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  padding-bottom: 2rem;
}

.user-item {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #545454;
  border-radius: 15px;
  font-size: 12px;
  color: #6f6d6d;
}

.btn {
  font-weight: 700;
  line-height: 1;
  font-size: 1rem;
  text-transform: none;
  padding: 10px 30px;
  border: 1px solid #222222;
  border-radius: 15px;
  text-decoration: none;
  color: #fff;
  background-color: #222222;
}

.user-item__primary-button {
  color: #fff;
  background-color: #222222;
}

.user-item__secondary-button {
  color: #222222;
  background-color: transparent;
}

.w-50 {
  width: 50%;
}

.text-ar {
  text-align: right;
}

.align-center {
  align-self: center;
}

.align-end {
  align-self: end;
}

.pb-1 {
  padding-bottom: 1rem;
}

.mr-1 {
  margin-right: 1rem;
}
<section class="user-container">

  <p class="user-title">Users List</p>

  <div class="user-item">
    <p class="user-item__email w-50 align-center">John Doe (john.doe@gmail.com)
      <p>
        <div class="w-50 text-ar align-center">
          <p class="user-item__role mr-1">Admin</p>
          <button class="user-item__primary-button btn">Button</button>
          <button class="user-item__secondary-button btn">Button</button>
        </div>
        <div class="w-50">
          <button class="user-item__secondary-button btn">Button</button>
        </div>
        <p class="user-item__detail w-50 text-ar align-end">Added Dec 01 2021 by Jane Doe</p>
  </div>

  <div class="user-item">
    <p class="user-item__email w-50 align-center">John Doe (john.doe@gmail.com)
      <p>
        <div class="w-50 text-ar align-center">
          <p class="user-item__role mr-1">Admin</p>
          <button class="user-item__primary-button btn">Button</button>
          <button class="user-item__secondary-button btn">Button</button>
        </div>
        <div class="w-50">
          <button class="user-item__secondary-button btn">Button</button>
        </div>
        <p class="user-item__detail w-50 text-ar align-end">Added Dec 01 2021 by Jane Doe</p>
  </div>

</section>

user_191582050
Related