基础6网格在img覆盖的问题反应

Question

我第一次使用基础6 xy网格，并且难以对齐三个图像，每个图像底部都有一个文本覆盖图。我努力让文本的背景填充图像的整个宽度，同时使它响应，newsArticle__pCont类的100％宽度大于我不明白的父单元格。下面是最近的，我已经得到了（这是不是很接近）

class News extends Component { 

    renderArticlePreview(article) { 
     if(articleCount <= 2) { 
      articleCount++; 
      return (
       <div key={article.id} className="cell small-12 medium-4 newsArticle__cont--firstThree"> 
        <img className="newsArticle__img--overlay" src={article.imageUrl} /> 
        <div className="newsArticle__pCont"> 
         <a href={"/article/" + article.id}><p className="newsArticle__title--overlay">{article.title}</p></a> 
        </div> 
       </div> 
      ) 
     } 
    } 

    render() { 
     const { news } = this.props; 

     return (
      <div> 
       <Header /> 
       <div className="grid-container"> 
        <div className="grid-x grid-padding-x newsArticle"> 
         { news.map((article) => this.renderArticlePreview(article)) } 
        </div> 
       </div> 
      </div> 
     ) 
    } 
} 

export default News; 

.scss

@import './Helpers.scss'; 

.newsArticle { 

    .newsArticle__cont--firstThree { 
     position: relative; 
    } 

    .newsArticle__title { 
     text-align: center; 
     font-size: 24px; 
     font-weight: 500; 
     color: #000000; 
    } 

    .newsArticle__title--overlay { 
     font-size: 16px; 
     font-weight: 500; 
     color: #FFFFFF; 
     text-align: center; 
     margin-bottom: 0px; 
    } 

    .newsArticle__pCont { 
     background-color: rgba(0, 94, 154, 0.75); 
     height: 45px; 
     position: absolute; 
     bottom: 0px; 
     z-index: 10; 
     width: 100%; 
    } 

    @include screen(sm-only) { 
     .newsArticle__img { 
      margin-top: 10px; 
     } 
    } 

    @include screen(md) { 
     .newsArticle__img { 
      margin: 10px; 
     } 

     .newsArticle__p { 
      margin: 10px; 
     } 
    } 
} 

Answer 1

所以，你的文字，现在是过大的原因是因为它是

1. 绝对位置（将其从流中取出，因此它不是由单元格本身的填充所包含的 ）
2. 宽度：100％，其中wil我把它拿到父母的全部宽度（包括填充）。

解决这个问题的最简单方法是从padding-x（水槽实际上在单元格内，单元格宽度包括水槽）切换到margin-x（水槽由边距完成，所以单元格宽度不包括排水沟）。这会改变你的网格，看起来像：

<div className="grid-x grid-margin-x newsArticle"> 

一个codepen显示此：https://codepen.io/kball/pen/zEGoaR