如何使CSS Grid中的元素具有相同的高度

时间：2018-02-09 11:38:53

标签： html css css-grid

我正在使用CSS-Grid布局，并想知道如何为panel-heading元素设置相等的高度？

特别是在下面的行中，我希望所有国家/地区名称部分都具有相同的高度，而TotalContacts部分的高度应该更小。

enter image description here

CodePen

https://codepen.io/ghazanfarmir/pen/ddNBEZ

＆＃13;
＆＃13; 
body {
  padding: 30px;
}

.countries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  grid-auto-rows: 1fr;
}

.countries .country {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  margin-bottom: 0;
}

.country .panel-heading {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  grid-gap: 20px;
  grid-auto-rows: 1fr;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="countries">
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/194/addresses" title="View Addresses">Abkhazia
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/1/addresses" title="View Addresses">Afghanistan
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/258/addresses" title="View Addresses">Aland
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/2/addresses" title="View Addresses">Albania
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/3/addresses" title="View Addresses">Algeria
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/238/addresses" title="View Addresses">American Samoa
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/4/addresses" title="View Addresses">Andorra
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/5/addresses" title="View Addresses">Angola
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/223/addresses" title="View Addresses">Anguilla
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/6/addresses" title="View Addresses">Antigua and Barbuda
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/7/addresses" title="View Addresses">Argentina
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/8/addresses" title="View Addresses">Armenia
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/259/addresses" title="View Addresses">Aruba
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/262/addresses" title="View Addresses">Ascension
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/201/addresses" title="View Addresses">Ashmore and Cartier Islands
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/9/addresses" title="View Addresses">Australia
                                </a>
        </h4>
        <p>Total Addresses <strong>3</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>9</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/264/addresses" title="View Addresses">Australian Antarctic Territory
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/10/addresses" title="View Addresses">Austria
                                </a>
        </h4>
        <p>Total Addresses <strong>3</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>1</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/11/addresses" title="View Addresses">Azerbaijan
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/12/addresses" title="View Addresses">Bahamas, The
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/13/addresses" title="View Addresses">Bahrain
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/239/addresses" title="View Addresses">Baker Island
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/14/addresses" title="View Addresses">Bangladesh
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/15/addresses" title="View Addresses">Barbados
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/16/addresses" title="View Addresses">Belarus
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/17/addresses" title="View Addresses">Belgium
                                </a>
        </h4>
        <p>Total Addresses <strong>1</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>1</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/18/addresses" title="View Addresses">Belize
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/19/addresses" title="View Addresses">Benin
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/224/addresses" title="View Addresses">Bermuda
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/20/addresses" title="View Addresses">Bhutan
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

可能不是您要查找的效果，但制作dfs = {} for i in range(len(index_for_chunks)-1): dfs[i] = df.iloc[index_for_chunks[i]:index_for_chunks[i+1]] 元素country并将行设置为display:grid会使两个部分的高度相同

1fr

enter image description here 

.countries .country {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  margin-bottom: 0;
  display:grid;
  grid-template-rows: repeat(2, 1fr);
}

body {
  padding: 30px;
}

.countries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  grid-auto-rows: 1fr;
}

.countries .country {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  margin-bottom: 0;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
}

.country .panel-heading {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  grid-gap: 20px;
  grid-auto-rows: 1fr;
}

相关问题
最新问题